/* ── ordine-stampa.css ─────────────────────────────────────────────
   Stili specifici ordine stampa. Carica DOPO ordini-common.css.
   ─────────────────────────────────────────────────────────────── */

/* ── Override variabili specifiche di stampa ──────────────────── */
/* stampa usa toni leggermente diversi per --muted e --text-sub    */
:root {
  --muted:    #888888;
  --text-sub: #c8c4be;
}
body.theme-light {
  --muted:    #606770;
  --text-sub: #606770;
}

/* ── body: stampa usa Poppins invece di DM Sans ───────────────── */
body { font-family: 'Poppins', sans-serif; }

/* ════════════════════════════════
   TOP BAR
════════════════════════════════ */
.topbar {
  height: 52px;
  background: var(--anthracite);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.brand {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: var(--red);
}
.brand span { color: var(--text); }

/* .steps / .step / .step-n / .step-line / .step-text — rimossi (usare .prog-step-wrap da common) */

.topbar-count { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }

/* ════════════════════════════════
   LAYOUT DESKTOP  (≥ 900px)
════════════════════════════════ */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr 268px;
  height: calc(100vh - 52px - 56px); /* 52=topbar, 56=progress-wrap */
  overflow: hidden; /* le colonne con height:100% gestiscono internamente */
}

/* ── Panel comune ── */
.panel {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mid) transparent;
}
.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-thumb { background: var(--mid); border-radius: 2px; }

.panel-title {
  padding: 14px 16px 10px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--anthracite); z-index: 5;
}

/* ════════════════════════════════
   LEFT PANEL — lista foto
════════════════════════════════ */
.panel-left {
  background: var(--anthracite);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.photo-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.photo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.15s;
  background: rgba(255,255,255,0.03);
  position: relative;
}
.photo-item:hover   { background: rgba(255,255,255,0.06); }
.photo-item.active  { border-color: var(--red); background: rgba(185,11,16,0.1); }
.photo-item.done    { border-color: rgba(255,255,255,0.1); }

.thumb {
  width: 40px; height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
/* colori fake thumbnail */
.c0 { background: linear-gradient(135deg,#4a3728,#8b6355); }
.c1 { background: linear-gradient(135deg,#2a3a4a,#4a6a8a); }
.c2 { background: linear-gradient(135deg,#3a4a2a,#6a8a4a); }
.c3 { background: linear-gradient(135deg,#4a2a4a,#8a4a8a); }
.c4 { background: linear-gradient(135deg,#4a4a2a,#8a8a4a); }
.c5 { background: linear-gradient(135deg,#2a4a4a,#4a8a8a); }

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  position: absolute; top: 5px; right: 5px;
}
.s-pending { background: #f0a020; }
.s-ok      { background: #4caf82; }
.s-active  { background: var(--red); }

.photo-meta { flex: 1; min-width: 0; }
.photo-name {
  font-size: 0.72rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-sub);
}
.photo-fmt {
  font-size: 0.62rem; color: var(--muted); margin-top: 1px;
}

/* Quantità inline */
.qty-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.qb {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s;
  line-height: 1;
  padding: 0;
}
.qb:hover { background: rgba(255,255,255,0.14); }
.qty-val {
  width: 20px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

/* banner applica a tutti */
.bulk-bar {
  padding: 8px 10px;
  background: rgba(185,11,16,0.12);
  border-top: 1px solid rgba(185,11,16,0.25);
  border-bottom: 1px solid rgba(185,11,16,0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.68rem;
}
.bulk-bar-text { color: #e8a0a2; line-height: 1.4; }
.bulk-bar-text strong { color: var(--text); }
.bulk-bar-hint { font-size: 0.6rem; color: rgba(232,160,162,0.55); margin-top: 2px; }
.btn-bulk {
  padding: 5px 10px;
  background: #4caf82;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.btn-bulk:hover { background: #3d9970; }

.panel-add {
  padding: 10px;
  border-top: 1px solid var(--border);
}
.btn-add {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.btn-add:hover { border-color: var(--red); color: var(--red); }

/* ════════════════════════════════
   CENTER — crop
════════════════════════════════ */
.panel-center {
  background: #0f1014;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 20px 64px;
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.panel-center::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
}

.crop-label {
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); z-index: 1;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  width: 100%;
  justify-content: center;
}
.crop-label::before,.crop-label::after { content:''; height:1px; width:32px; background:var(--border); }

.crop-wrap {
  position: relative; z-index: 1; user-select: none;
  flex: 1;         /* prende tutto lo spazio tra label e controls */
  min-height: 0;   /* fondamentale: permette al flex-child di restringersi */
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.crop-frame {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 0 1px rgba(185,11,16,0.25), 0 16px 48px rgba(0,0,0,0.55);
  cursor: grab;
  /* max dimensioni impostate da JS via style inline dopo misura reale del wrap */
  max-height: var(--crop-max-h, 99%);
  max-width:  var(--crop-max-w, 99%);
  /* Impedisce al browser di intercettare i touch come scroll/zoom:
     tutto viene gestito dal JavaScript */
  touch-action: none;
}
.crop-frame:active { cursor: grabbing; }

/* angolini rossi */
.cr { position: absolute; width: 14px; height: 14px; border-color: var(--red); border-style: solid; z-index: 10; pointer-events: none; }
.cr.tl { top:-1px; left:-1px; border-width: 2px 0 0 2px; }
.cr.tr { top:-1px; right:-1px; border-width: 2px 2px 0 0; }
.cr.bl { bottom:-1px; left:-1px; border-width: 0 0 2px 2px; }
.cr.br { bottom:-1px; right:-1px; border-width: 0 2px 2px 0; }

.crop-photo {
  position: absolute;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}

.thirds-grid { position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity 0.2s; }
.thirds-grid.on { opacity:1; }
.tl-line { position:absolute;background:rgba(255,255,255,0.18); }
.tl-line.h{width:100%;height:1px;} .tl-line.v{height:100%;width:1px;}
.tl-line.h1{top:33.33%;} .tl-line.h2{top:66.66%;}
.tl-line.v1{left:33.33%;} .tl-line.v2{left:66.66%;}

.dpi-badge {
  position:absolute; top:10px; right:10px; z-index:20;
  padding: 3px 9px; border-radius:20px;
  font-size:0.62rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
}
.dpi-badge.good { background:rgba(76,175,130,0.18); color:#4caf82; border:1px solid rgba(76,175,130,0.3); }
.dpi-badge.warn { background:rgba(240,160,32,0.18); color:#f0a020; border:1px solid rgba(240,160,32,0.3); }
.dpi-badge.bad  { background:rgba(200,50,50,0.18);  color:#e06060; border:1px solid rgba(200,50,50,0.3); }

.crop-hint {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:20;
  background:rgba(0,0,0,0.65); backdrop-filter:blur(6px);
  padding:4px 12px; border-radius:20px; font-size:0.62rem; color:rgba(255,255,255,0.45);
  white-space:nowrap; pointer-events:none;
  animation: hintFade 3.5s ease 1.2s forwards;
}
@keyframes hintFade { 0%{opacity:1} 70%{opacity:1} 100%{opacity:0} }

/* ── Two-finger hint overlay (mobile) ── */
.two-finger-hint {
  position: absolute; inset: 0; z-index: 25;
  background: rgba(0,0,0,0.52); backdrop-filter: blur(3px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: #fff; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
  border-radius: inherit;
}
.two-finger-hint.visible { opacity: 1; }
.two-finger-hint .tf-icon { font-size: 2rem; line-height: 1; }
.two-finger-hint .tf-text { font-size: 0.72rem; text-align: center; line-height: 1.5; }

/* controlli zoom / rotate */
.crop-controls {
  z-index: 1; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0;
  padding-bottom: 8px;
}

.zoom-row { display:flex; align-items:center; gap:10px; }
.zoom-ico { font-size:0.85rem; color:var(--muted); }
.zoom-sl {
  flex:1; -webkit-appearance:none; height:3px;
  background: linear-gradient(to right, var(--red) 0%, var(--red) 0%, rgba(255,255,255,0.15) 0%);
  border-radius:2px; outline:none; cursor:pointer;
}
.zoom-sl::-webkit-slider-thumb {
  -webkit-appearance:none; width:15px;height:15px; border-radius:50%;
  background:var(--red); border:2px solid #fff; cursor:pointer;
}
.zoom-lbl { font-size:0.68rem; color:var(--muted); width:32px; text-align:right; }

.btn-row { display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap; }
.bi {
  width:34px;height:34px; border-radius:6px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  color:var(--text-sub); cursor:pointer; font-size:0.9rem;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;
}
.bi:hover { background:rgba(255,255,255,0.12); color:#fff; }
.bi.on { background:rgba(56,116,240,0.2); border-color:rgba(56,116,240,0.55); color:#7baef8; }

.bc {
  padding:6px 14px; border-radius:6px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  color:var(--text-sub); cursor:pointer; font-size:0.7rem; font-family:inherit;
  letter-spacing:0.04em; transition:all 0.15s; display:flex; align-items:center; gap:4px;
}
.bc:hover { background:rgba(255,255,255,0.12); color:#fff; }

/* ════════════════════════════════
   RIGHT PANEL — impostazioni
════════════════════════════════ */
.panel-right {
  background: var(--anthracite);
  border-left: 1px solid var(--border);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.s-sec { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.s-lbl {
  font-size:0.62rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px;
  display:flex; align-items:center; justify-content:space-between;
}

/* Formato tabs */
.fmt-tabs { display:flex; gap:3px; margin-bottom:8px; }
.ft {
  flex:1; padding:5px 2px; text-align:center;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:4px; color:var(--muted); font-size:0.6rem; font-family:inherit;
  cursor:pointer; transition:all 0.15s;
}
.ft.on { background:rgba(56,116,240,0.18); border-color:rgba(56,116,240,0.55); color:#7baef8; }

.fmt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.fb {
  padding:6px 3px; text-align:center;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:5px; color:var(--text-sub); font-size:0.66rem; font-family:inherit;
  cursor:pointer; transition:all 0.15s; line-height:1.2;
}
.fb:hover { background:rgba(255,255,255,0.09); }
.fb.on { background:rgba(56,116,240,0.2); border-color:rgba(56,116,240,0.6); color:#7baef8; font-weight:600; }
.fb small { display:block; font-size:0.52rem; color:var(--muted); margin-top:1px; }
.fb.on small { color:rgba(123,174,248,0.8); }

/* ── Formato personalizzato ── */
.custom-fmt-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  padding: 6px 2px;
  grid-column: 1 / -1; /* span full width when inside a grid container */
}
.custom-fmt-row label { font-size: 0.6rem; color: var(--muted); white-space: nowrap; }
.custom-fmt-input {
  width: 72px; padding: 5px 7px; border-radius: 5px; text-align: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  color: var(--text); font-size: 0.78rem; font-family: inherit; outline: none;
}
.custom-fmt-input:focus { border-color: var(--red); }
.custom-fmt-sep { color: var(--muted); font-size: 0.8rem; }
.custom-fmt-apply {
  padding: 5px 12px; border-radius: 5px; font-size: 0.66rem; font-weight: 600;
  background: rgba(185,11,16,0.2); border: 1px solid rgba(185,11,16,0.4);
  color: #e8a0a2; font-family: inherit; cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.custom-fmt-apply:hover { background: rgba(185,11,16,0.35); color: #fff; }

/* orientamento */
.or-row { display:flex; gap:6px; }
.ob {
  flex:1; padding:8px 4px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:5px; color:var(--text-sub); font-size:0.7rem; font-family:inherit;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px;
  transition:all 0.15s;
}
.or-icon { background:rgba(255,255,255,0.15); border-radius:2px; border:1.5px solid rgba(255,255,255,0.25); }
.ob.portrait  .or-icon { width:18px; height:24px; }
.ob.landscape .or-icon { width:24px; height:18px; }
.ob.on { background:rgba(56,116,240,0.15); border-color:rgba(56,116,240,0.5); color:#7baef8; }
.ob.on .or-icon { border-color:rgba(56,116,240,0.7); }

/* stats */
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.si {
  background:rgba(255,255,255,0.04); border-radius:6px; padding:5px 8px;
}
.si-l { font-size:0.55rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:1px; }
.si-v { font-size:0.78rem; font-weight:600; color:var(--text); }
.si-v.good { color:#4caf82; }
.si-v.warn { color:#f0a020; }
.si-v.bad  { color:#e06060; }

/* note */
.note-ta {
  width:100%; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1); border-radius:6px;
  color:var(--text-sub); font-size:0.72rem; font-family:inherit;
  padding:7px 10px; resize:none; outline:none; line-height:1.5;
}
.note-ta:focus { border-color:var(--red); }
.note-ta::placeholder { color:rgba(255,255,255,0.18); }

/* alert */
.alert {
  display:flex; gap:8px; padding:6px 9px;
  border-radius:6px; font-size:0.68rem; line-height:1.4;
  margin-bottom:6px;
}
.alert.ok   { background:rgba(76,175,130,0.1); border:1px solid rgba(76,175,130,0.25); color:#6fd4a8; }
.alert.warn { background:rgba(240,160,32,0.1); border:1px solid rgba(240,160,32,0.25); color:#f0c060; }
.alert.bad  { background:rgba(200,50,50,0.1);  border:1px solid rgba(200,50,50,0.25);  color:#e08080; }

/* ── Selezione carta ── */
.carta-toggle {
  display: flex;
  gap: 5px;
}
.carta-btn {
  flex: 1; padding: 7px 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px; color: var(--text-sub); font-size: 0.7rem; font-family: inherit;
  cursor: pointer; text-align: center; transition: all 0.15s; line-height: 1.3;
}
.carta-btn small { display: block; font-size: 0.55rem; color: var(--muted); margin-top: 1px; }
.carta-btn.on { background: rgba(56,116,240,0.18); border-color: rgba(56,116,240,0.55); color: #7baef8; }
.carta-btn.on small { color: rgba(123,174,248,0.8); }

/* ── Costo foto corrente ── */
.cost-this {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.7rem; color: var(--muted); margin-top: 8px;
  padding: 6px 0 0;
  border-top: 1px solid var(--border);
}
.cost-this-val { font-weight: 600; color: var(--text-sub); font-size: 0.78rem; }

/* ── Totale ordine in fondo ── */
.order-total {
  position: sticky; bottom: 0;
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 11px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  z-index: 10;
}
.total-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.total-breakdown { font-size: 0.62rem; color: rgba(255,255,255,0.75); margin-top: 1px; }
.total-amount { font-size: 1.3rem; color: var(--text); font-weight: 700; }
.total-amount small { font-family: 'DM Sans', sans-serif; font-size: 0.7rem; color: var(--muted); margin-right: 2px; }
.total-discount {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #4caf82;
  background: rgba(76,175,130,0.12); border: 1px solid rgba(76,175,130,0.25);
  padding: 2px 7px; border-radius: 10px;
}

/* CTA */
.btn-confirm {
  width:100%; padding:11px;
  background:var(--red); border:none; border-radius:8px;
  color:#fff; font-size:0.82rem; font-weight:600; font-family:inherit;
  letter-spacing:0.04em; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition:all 0.2s;
}
.btn-confirm:hover { background:var(--red-dark); transform:translateY(-1px); }
.btn-next {
  width:100%; margin-top:7px; padding:9px;
  background:transparent; border:1.5px solid rgba(255,255,255,0.14);
  border-radius:8px; color:var(--text-sub); font-size:0.76rem; font-family:inherit;
  letter-spacing:0.04em; cursor:pointer; transition:all 0.15s;
}
.btn-next:hover { border-color:rgba(255,255,255,0.3); color:var(--text); }

/* ════════════════════════════════
   MOBILE ≤ 899px
   Layout:
   - Topbar (step numeri, no testo)
   - Film strip foto (scroll orizzontale)
   - Crop (full width, quadrato)
   - Impostazioni accordion-like
════════════════════════════════ */
@media (max-width: 899px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    height: auto;
    overflow: visible;
  }
  .panel-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: column;
  }
  .panel-title { display: none; }
  .photo-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    padding: 10px 12px;
    gap: 8px;
    scrollbar-width: none;
  }
  .photo-list::-webkit-scrollbar { display: none; }
  .photo-item {
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: 8px 6px;
    gap: 5px;
    text-align: center;
  }
  .thumb { width: 48px; height: 48px; }
  .photo-meta { display: none; } /* nascosto su mobile, c'è solo il nome corto sopra */
  .qty-inline { gap: 3px; }
  .qb { width: 20px; height: 20px; font-size: 0.7rem; }
  .qty-val { font-size: 0.72rem; width: 16px; }

  /* nome file abbreviato su mobile */
  .photo-item::after {
    content: attr(data-short);
    font-size: 0.58rem;
    color: var(--muted);
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bulk-bar { flex-wrap: wrap; }

  .panel-add { display: none; }

  /* Centro */
  .panel-center {
    padding: 12px;
    gap: 10px;
    height: auto;
    overflow-y: auto;
    justify-content: flex-start;
  }
  .crop-wrap {
    flex: 1;
    min-height: 200px;
  }
  .crop-controls { max-width: 100%; flex-shrink: 0; }
  .btn-row { gap: 5px; }

  /* Destra */
  .panel-right {
    border-left: none;
    border-top: 1px solid var(--border);
    overflow: visible;
    height: auto;
  }
}

/* ════════════════════════════════
   SCHERMI GRANDI ≥ 1600px
════════════════════════════════ */
@media (min-width: 1600px) {
  .layout {
    grid-template-columns: 300px 1fr 320px;
  }
  .bulk-fmt-panel, .s-sec { padding-left: 16px; padding-right: 16px; }
  .fmt-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .photo-item { padding: 10px 12px; }
  .thumb { width: 52px; height: 52px; }
}

@media (min-width: 1300px) and (max-width: 1599px) {
  .layout {
    grid-template-columns: 260px 1fr 285px;
  }
}

/* Step testo visibile solo ≥ 560px */
@media (max-width: 559px) {
  .topbar-count { display: none; }
  .step-line { width: 14px; margin: 0 3px; }
}
/* ════════════════════════════════
   Stato completamento
════════════════════════════════ */
.all-done {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; text-align: center; z-index: 1;
  padding: 40px 20px;
}
.all-done-icon { font-size: 2.5rem; }
.all-done h2 { font-family:'Playfair Display',serif; font-size:1.3rem; }
.all-done p { font-size:0.82rem; color:var(--muted); }
.btn-go-next {
  padding:12px 32px;
  background:var(--red); border:none; border-radius:8px;
  color:#fff; font-size:0.88rem; font-weight:600; font-family:inherit;
  letter-spacing:0.04em; cursor:pointer; transition:all 0.2s;
}
.btn-go-next:hover { background:var(--red-dark); transform:translateY(-1px); }


/* ═══════════════════════════
   SITE HEADER
═══════════════════════════ */
.site-header {
  background: var(--anthracite); border-bottom: 1px solid var(--border);
  padding: 0 20px; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 200;
}
.site-brand { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--text); text-decoration: none; }
.site-brand em { color: var(--red); font-style: normal; }
.site-back { font-size: 0.72rem; color: var(--muted); text-decoration: none;
  display: flex; align-items: center; gap: 5px; transition: color 0.15s; }
.site-back:hover { color: var(--text); }

/* ═══════════════════════════
   PROGRESS BAR  (wrapper — la struttura .prog-step-wrap è in ordini-common.css)
═══════════════════════════ */
.progress-wrap {
  background: var(--anthracite); border-bottom: 1px solid var(--border);
  padding: 8px 20px; display: flex; align-items: center; justify-content: center;
  min-height: 56px; flex-shrink: 0;
}
/* overriding .progress-bar-wrap per centrare orizzontalmente nel wrapper stampa */
.progress-wrap .progress-bar-wrap { flex: none; width: 300px; }
.progress-wrap .prog-line { min-width: 60px; }
@media (max-width: 520px) {
  .progress-wrap .progress-bar-wrap { width: 220px; }
  .progress-wrap .prog-line { min-width: 30px; }
}

/* ═══════════════════════════
   STEP PANELS
═══════════════════════════ */
.step-wrap { display: none; }
.step-wrap.active { display: block; }

/* ═══════════════════════════
   STEP 1: UPLOAD
═══════════════════════════ */
.step1-inner { max-width: 620px; margin: 0 auto; padding: 36px 20px; }
.step-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 400; margin-bottom: 8px; }
.step-sub   { font-size: 0.8rem; color: rgba(255,255,255,0.4); line-height: 1.7; margin-bottom: 26px; }

.upload-zone {
  border: 2px dashed rgba(255,255,255,0.14); border-radius: 12px;
  padding: 38px 20px; text-align: center; cursor: pointer; transition: all 0.2s; margin-bottom: 16px;
}
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--red); background: rgba(185,11,16,0.05); }
.upload-icon  { font-size: 2.2rem; color: rgba(255,255,255,0.18); margin-bottom: 10px; }
.upload-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 5px; }
.upload-sub   { font-size: 0.78rem; color: var(--muted); margin-bottom: 8px; }
.upload-hint  { font-size: 0.65rem; color: rgba(255,255,255,0.18); }

.upload-counter { font-size: 0.7rem; color: var(--muted); margin-bottom: 6px; }
.upload-list  { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.upload-item  { display: flex; align-items: center; gap: 10px;
  background: var(--anthracite); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; }
.upload-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.upload-info  { flex: 1; min-width: 0; }
.upload-name  { font-size: 0.78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-size  { font-size: 0.63rem; color: var(--muted); margin-top: 2px; }
.upload-remove { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.05);
  border: none; color: var(--muted); cursor: pointer; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.14s; }
.upload-remove:hover { background: rgba(185,11,16,0.2); color: #e8a0a2; }
.upload-error { font-size: 0.7rem; color: #e08080; background: rgba(200,50,50,0.1);
  border: 1px solid rgba(200,50,50,0.2); border-radius: 6px; padding: 7px 12px; margin-bottom: 8px; }

.btn-to-next {
  width: 100%; padding: 13px; border-radius: 9px; background: var(--red); border: none; color: #fff;
  font-size: 0.86rem; font-weight: 600; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; margin-top: 6px;
}
.btn-to-next:disabled { background: var(--mid); cursor: not-allowed; opacity: 0.6; }
.btn-to-next:not(:disabled):hover { background: var(--red-dark); transform: translateY(-1px); }
.btn-back-text { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem;
  color: var(--muted); cursor: pointer; background: none; border: none; padding: 10px 0;
  font-family: inherit; transition: color 0.14s; }
.btn-back-text:hover { color: var(--text); }

/* ═══════════════════════════
   STEP 2: barra navigazione
═══════════════════════════ */
.step2-nav {
  padding: 11px 20px; background: var(--anthracite); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: sticky; bottom: 0; z-index: 50;
  height: 52px; flex-shrink: 0;
}
.step2-nav-hint { font-size: 0.7rem; color: var(--muted); }
.step2-nav-btn  { padding: 9px 14px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-sub); font-size: 0.75rem; font-weight: 600; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 7px; transition: all 0.15s; }
.step2-nav-btn:hover { background: rgba(255,255,255,.09); }
/* "Al carrello": variante scura, stesso trattamento di ordine-vintage.php.
   !important necessario per vincere su .step2-nav-btn-secondary di
   ordini-common.css, che usa a sua volta !important. */
.step2-nav-btn-secondary { background: var(--dark) !important; border: 1.5px solid rgba(255,255,255,0.15) !important; }
/* ═══════════════════════════
   STEP 3: dati + consegna + pagamento
═══════════════════════════ */
.step3-inner { max-width: 720px; margin: 0 auto; padding: 36px 20px; }
.step3-block {
  background: var(--anthracite); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; margin-bottom: 14px;
}
.step3-block-title {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.step3-block-title i { color: var(--red); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field.full { grid-column: 1 / -1; }
.form-label { font-size: 0.63rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.form-label .req { color: var(--red); }
.form-input {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px; color: var(--text); font-size: 0.85rem; font-family: inherit;
  padding: 9px 12px; outline: none; transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--red); }
.form-input.error { border-color: #e08080; }
.form-field-hint { display: none; font-size: 0.68rem; color: #e08080; margin-top: 3px; }
.form-input.error ~ .form-field-hint { display: block; }
.form-textarea { resize: vertical; min-height: 60px; }

/* Card consegna e pagamento */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.opt-card {
  background: rgba(255,255,255,0.03); border: 2px solid rgba(255,255,255,0.08);
  border-radius: 9px; padding: 12px 14px; cursor: pointer; transition: all 0.15s;
}
.opt-card:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); }
.opt-card.on { border-color: var(--red); background: rgba(185,11,16,0.1); }
.opt-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.opt-label  { font-size: 0.82rem; font-weight: 600; }
.opt-magg   { font-size: 0.6rem; font-weight: 700; padding: 1px 6px; border-radius: 10px;
  background: rgba(185,11,16,0.2); color: #e8a0a2; }
.opt-magg      { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.5); }
.opt-magg.disc { background: rgba(76,175,130,0.15); color: #6fd4a8; }
.opt-giorni { font-size: 0.72rem; color: var(--text-sub); margin-bottom: 3px; }
.opt-desc   { font-size: 0.65rem; color: var(--muted); line-height: 1.4; }
.opt-orario { display: block; color: #e8a0a2; font-weight: 600; margin-top: 2px; }
.opt-pag-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.opt-pag-head i { color: var(--red); font-size: 0.85rem; }
.opt-pag-sub  { font-size: 0.68rem; color: var(--muted); line-height: 1.4; }
.opt-badge  { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 10px; background: rgba(76,175,130,0.15); color: #6fd4a8; font-family: inherit; }

/* Totale step 3 */
.totale-box {
  background: var(--dark); border: 1px solid rgba(185,11,16,0.2);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 14px;
}
.totale-row { display: flex; justify-content: space-between; font-size: 0.78rem;
  color: rgba(255,255,255,0.55); padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.totale-row.green { color: #6fd4a8; }
.totale-row.finale { font-size: 0.9rem; font-weight: 600; color: var(--text);
  border-bottom: none; padding-top: 10px; margin-top: 4px; }
.totale-row.finale span:last-child { font-size: 1.3rem; font-weight: 700; }
.totale-disclaimer { font-size: 0.65rem; color: rgba(255,255,255,0.3); margin-top: 10px; line-height: 1.5; }
.warn-nota { font-size: 0.7rem; color: #f0c060; background: rgba(240,160,32,0.1);
  border: 1px solid rgba(240,160,32,0.2); border-radius: 7px; padding: 8px 12px; margin-top: 8px;
  display: flex; align-items: flex-start; gap: 6px; }

/* ═══════════════════════════
   STEP 4: RIEPILOGO
═══════════════════════════ */
.step4-inner { max-width: 720px; margin: 0 auto; padding: 36px 20px; }
.riepilogo-block { background: var(--anthracite); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; margin-bottom: 14px; }
.riepilogo-row-v { display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 0.8rem; color: rgba(255,255,255,0.6);
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.riepilogo-row-v:last-child { border-bottom: none; }
.riepilogo-row-v strong { color: var(--text); font-weight: 500; text-align: right; max-width: 60%; }
.riepilogo-row-v.total strong { font-size: 1.1rem; font-weight: 700; color: #e8a0a2; }

/* Riga "Foto (N immagini — N stampe)" + freccia in #block-foto-summary
   (step 3, quella davvero renderizzata da buildFotoSummaryStep3 — non
   confondere con #riepilogo-foto/.riepilogo-foto-toggle qui sotto, che è
   codice morto mai richiamato). Icona+testo+contatori erano 4-5 nodi
   separati dentro lo stesso flex row nowrap: ognuno si restringeva per
   conto suo e il testo andava a capo in un punto qualsiasi, spesso proprio
   prima della parentesi finale — sembrava un errore invece che un a-capo.
   Il fix vero è nel markup (servizi/ordine-stampa.php): tutto il testo è
   stato racchiuso in un unico <span class="foto-summary-label">. */
.foto-summary-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Stesso fix, applicato per completezza anche al blocco JS-generato
   #riepilogo-foto/buildRiepilogo() — attualmente dead code (mai chiamato),
   ma se un giorno viene ricollegato è già a posto. */
.riepilogo-foto-toggle > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.riepilogo-foto-toggle .riepilogo-chevron {
  flex-shrink: 0;
}

.riepilogo-foto-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.riepilogo-foto-item { display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.03); border-radius: 7px; padding: 8px 10px; }
.riepilogo-foto-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.riepilogo-foto-info  { flex: 1; min-width: 0; }
.riepilogo-foto-name  { font-size: 0.78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riepilogo-foto-meta  { font-size: 0.65rem; color: var(--muted); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }

.invio-box { background: var(--anthracite); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 14px; }
.invio-nota { font-size: 0.75rem; color: rgba(255,255,255,0.45); line-height: 1.65; display: flex; gap: 10px; }
.invio-nota i { color: var(--red); flex-shrink: 0; margin-top: 2px; }
.btn-invia { padding: 14px; border-radius: 9px; background: var(--red); border: none; color: #fff;
  font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; }
.btn-invia:disabled { background: var(--mid); cursor: not-allowed; }
.btn-invia:not(:disabled):hover { background: var(--red-dark); }
/* Pulsante carrello — distinto dal rosso e dal grigio disabilitato */
#btn-cart {
  background: rgba(255,255,255,0.07) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.85) !important;
}
#btn-cart:hover { background: rgba(255,255,255,0.13) !important; border-color: rgba(255,255,255,0.4) !important; }
/* Collapsible lista foto nel riepilogo */
.riepilogo-foto-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.riepilogo-foto-body.open { max-height: 4000px; }
.invio-error { font-size: 0.75rem; color: #e08080; background: rgba(200,50,50,0.1);
  border: 1px solid rgba(200,50,50,0.2); border-radius: 7px; padding: 10px 14px; }

/* ── Banner foto non configurate ── */
.incomplete-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(240,160,32,0.1); border: 1px solid rgba(240,160,32,0.3);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
}
.incomplete-banner i { color: #f0a020; font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.incomplete-banner-text { flex: 1; font-size: 0.78rem; color: #f0c060; line-height: 1.5; }
.incomplete-banner-text strong { color: var(--text); display: block; margin-bottom: 3px; }
.incomplete-banner-list { margin: 6px 0 0; padding-left: 1em; font-size: 0.73rem; color: rgba(240,192,96,0.8); }
.incomplete-banner-list li { margin-bottom: 2px; }
.incomplete-banner .btn-go-back {
  padding: 5px 12px; font-size: 0.7rem; font-family: inherit; font-weight: 600;
  background: rgba(240,160,32,0.2); border: 1px solid rgba(240,160,32,0.4);
  border-radius: 5px; color: #f0c060; cursor: pointer; white-space: nowrap;
  flex-shrink: 0; transition: background 0.15s;
}
.incomplete-banner .btn-go-back:hover { background: rgba(240,160,32,0.32); }

/* ── Checkbox privacy ── */
.privacy-check-block {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.privacy-check-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
.privacy-check-row input[type="checkbox"] {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--red); cursor: pointer;
}
.privacy-check-label {
  font-size: 0.76rem; color: var(--text-sub); line-height: 1.5;
}
.privacy-check-label a { color: var(--red); text-decoration: none; }
.privacy-check-label a:hover { text-decoration: underline; }
.privacy-check-error {
  font-size: 0.7rem; color: #e08080; margin-top: 7px; display: none;
}
.privacy-check-error.visible { display: block; }

/* Banner errori form step 3 */
.form-alert-banner {
  display: none;
  background: rgba(185,11,16,0.08);
  border: 1px solid rgba(185,11,16,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.78rem;
  color: #e08080;
  line-height: 1.5;
}
.form-alert-banner.visible { display: flex; gap: 10px; align-items: flex-start; }
.form-alert-banner .fab-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.form-alert-banner ul { margin: 4px 0 0 0; padding-left: 16px; }
.form-alert-banner ul li { margin-bottom: 2px; }
body.theme-light .form-alert-banner {
  background: rgba(220,50,50,0.06);
  border-color: rgba(220,50,50,0.25);
  color: #c0392b;
}

/* Barra progresso invio */
.upload-progress-wrap { display:none; flex-direction:column; gap:10px; }
.upload-progress-wrap.visible { display:flex; }
.upload-progress-header { display:flex; align-items:center; justify-content:space-between; }
.upload-progress-label { font-size:0.75rem; font-weight:600; color:var(--text-sub); letter-spacing:0.03em; }
.upload-progress-pct { font-size:0.78rem; font-weight:700; color:var(--red); font-variant-numeric:tabular-nums; }
.upload-progress-track { width:100%; height:7px; background:rgba(255,255,255,0.08); border-radius:99px; overflow:hidden; }
.upload-progress-bar { height:100%; width:0%; background:linear-gradient(90deg,#b90b10,#e8606a); border-radius:99px; transition:width 0.2s ease; }
.upload-progress-files { font-size:0.65rem; color:var(--muted); }

/* Successo */
.success-inner { max-width: 480px; margin: 60px auto; text-align: center; padding: 0 20px; }
.success-icon  { font-size: 4rem; color: #6fd4a8; margin-bottom: 20px; }
.success-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin-bottom: 12px; }
.success-sub   { font-size: 0.85rem; color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 28px; }
.success-btns  { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── FIT / FILL badge ── */
.fitfill-row {
  display: flex; gap: 5px; margin-top: 8px;
}
.ffb {
  flex: 1; padding: 6px 4px; text-align: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px; color: var(--text-sub); font-size: 0.66rem; font-family: inherit;
  cursor: pointer; transition: all 0.15s; line-height: 1.3;
}
.ffb:hover { background: rgba(255,255,255,0.09); }
.ffb.on { background: rgba(56,116,240,0.2); border-color: rgba(56,116,240,0.6); color: #7baef8; font-weight: 600; }
.ffb small { display: block; font-size: 0.52rem; color: var(--muted); margin-top: 1px; }
.ffb.on small { color: rgba(123,174,248,0.8); }

/* ── Spazio bianco FIT ── */
.crop-photo.fit-mode {
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #1a1c22;
}

/* ── Orientamento automatico badge ── */
.orient-auto-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.58rem; color: #6fd4a8;
  background: rgba(76,175,130,0.12); border: 1px solid rgba(76,175,130,0.25);
  padding: 2px 6px; border-radius: 10px; margin-left: 6px;
}

/* ── Pannello sinistro: bulk formato in alto ── */
.bulk-fmt-panel {
  padding: 10px 10px 0;
  border-bottom: 1px solid var(--border);
}
.bulk-fmt-title {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.bulk-qty-row {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 10px;
}
.bulk-qty-label { font-size: 0.62rem; color: var(--muted); flex: 1; }
.bulk-qty-controls { display: flex; align-items: center; gap: 4px; }
.bqb {
  width: 24px; height: 24px; border-radius: 4px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text); font-size: 0.8rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s;
}
.bqb:hover { background: rgba(255,255,255,0.14); }
.bulk-qty-val {
  width: 28px; text-align: center; font-size: 0.82rem;
  font-weight: 600; color: var(--text);
}

/* Legenda stato foto */
.foto-legenda {
  display: flex; gap: 10px; align-items: center;
  padding: 7px 10px 5px;
  border-bottom: 1px solid var(--border);
}
.leg-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.57rem; color: var(--muted); letter-spacing: 0.04em;
}
.leg-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.leg-dot.red    { background: var(--red); }
.leg-dot.yellow { background: #f0a020; }
.leg-dot.green  { background: #4caf82; }

/* Header sezione panel left/right */
.panel-section-header {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
}
.panel-section-title {
  font-size: 0.72rem; font-weight: 600; color: var(--text); letter-spacing: 0.01em;
}
.panel-section-sub {
  font-size: 0.6rem; color: var(--muted); margin-top: 2px; line-height: 1.4;
}

/* ════════════════════════════════
   STEP 2: GALLERY LAYOUT (nuovo)
════════════════════════════════ */
#sw-2 { display: none; flex-direction: column; min-height: calc(100vh - 96px); }
#sw-2.active { display: flex; }

/* ── Global panel ── */
.global-panel {
  background: var(--anthracite);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px 12px;
}
.global-panel-inner {
  width: 100%; max-width: 1400px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
}
.gp-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.gp-title {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.gp-subtitle {
  font-size: 0.58rem; color: var(--muted); opacity: 0.7; text-align: right;
}
/* Corpo principale: formato (sinistra) + carta/modalità (destra) */
.gp-main {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start;
}
.gp-section { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gp-section-label {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
/* Sezione formato: grid 5 colonne su desktop */
.gp-fmt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#fmtGridBulk { grid-template-columns: repeat(5, 1fr) !important; }
/* Sezione carta + modalità: colonna destra */
.gp-carta-section {
  display: flex; flex-direction: column; gap: 8px; min-width: 190px;
}
.gp-carta-header {
  display: flex; align-items: center; gap: 8px;
}
.gp-stesso-prezzo {
  font-size: 0.55rem; color: #4caf82; font-weight: 400; text-transform: none;
  letter-spacing: 0;
}
.gp-modal-row { display: flex; gap: 4px; }
/* Footer: legenda | applica | copie */
.gp-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-top: 8px; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.gp-legenda { display: flex; gap: 14px; flex-wrap: wrap; }
.gp-copie-group { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.gp-copie-row { display: flex; align-items: center; gap: 6px; }
.gp-apply-btn { padding: 7px 18px; white-space: nowrap; }
@media (max-width: 900px) {
  .gp-main { grid-template-columns: 1fr; gap: 10px; }
  .gp-carta-section { min-width: 0; }
  .gp-modal-row { flex-wrap: wrap; }
  #fmtGridBulk { grid-template-columns: repeat(4, 1fr) !important; }
}
/* ── Mobile compact bar (hidden on desktop) ── */
.gp-mobile-bar {
  display: none;
  align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 12px; cursor: pointer;
}
.gp-mb-info {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--text);
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gp-mb-fmt  { font-weight: 700; font-size: 0.9rem; }
.gp-mb-sep  { color: var(--muted); }
.gp-mb-mode, .gp-mb-carta { color: var(--muted); font-size: 0.78rem; }
.gp-mb-btn  {
  background: var(--red); color: #fff; border: none; border-radius: 6px;
  padding: 6px 14px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
/* Mobile close header (hidden on desktop) */
.gp-mobile-header {
  display: none;
  align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.gp-close-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 0.9rem; padding: 4px 10px; cursor: pointer;
}

@media (max-width: 599px) {
  /* Hide full panel, show compact bar */
  .global-panel { padding: 0; }
  .global-panel-inner { display: none; }
  .gp-mobile-bar { display: flex; }
  /* When modal is open, panel becomes full-screen overlay */
  .global-panel-inner.gp-open {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1050;
    background: var(--anthracite);
    overflow-y: auto;
    padding: 14px 14px 80px;
    flex-direction: column;
    gap: 10px;
    border-bottom: none;
    max-width: none;
  }
  .gp-mobile-header { display: flex; }
  .gp-subtitle { display: none; }
  /* Existing layout fixes for when panel is visible as overlay */
  .gp-main { grid-template-columns: 1fr; gap: 12px; }
  .gp-carta-section { min-width: 0; }
  #fmtGridBulk { grid-template-columns: repeat(3, 1fr) !important; }
  .gp-footer { gap: 8px; flex-direction: column; align-items: stretch; }
  .gp-legenda { gap: 8px; }
  .gp-copie-group { align-items: flex-start; }
  .gp-apply-btn { width: 100%; }
}

/* ── Photo gallery ── */
.photo-gallery {
  flex: 1;
  padding: 18px 20px 90px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  align-content: start;
  overflow-y: auto;
}
@media (max-width: 480px) {
  .photo-gallery { grid-template-columns: repeat(1, 1fr); padding: 10px 12px 80px; gap: 8px; }
}
@media (min-width: 481px) and (max-width: 860px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); padding: 10px 14px 80px; gap: 10px; }
}
/* 861–1399px: schermi medi (es. 1280×1024) — card più larghe + controlli su 2 righe */
@media (min-width: 861px) and (max-width: 1399px) {
  .photo-gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .card-controls { flex-wrap: wrap; row-gap: 4px; }
  .card-fmt-btn  { flex: 1 1 auto; max-width: none; }
  .card-qty      { margin-left: auto; }
}
@media (min-width: 1400px) {
  .photo-gallery { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
@media (min-width: 1700px) {
  .photo-gallery { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding: 20px 28px 90px; gap: 16px; }
}

/* ── Photo card ── */
.photo-card {
  background: var(--anthracite);
  border: 1.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.photo-card:hover { border-color: rgba(255,255,255,0.14); }
.photo-card.card-done { border-color: rgba(76,175,130,0.35); }
.photo-card.card-active { border-color: var(--red); box-shadow: 0 0 0 2px rgba(185,11,16,0.2); }

.card-thumb-wrap {
  position: relative;
  aspect-ratio: 4/3;
  background: #0f1014;
  overflow: hidden;
  flex-shrink: 0;
}
.card-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-thumb-placeholder { width: 100%; height: 100%; }

/* Strip header sopra il frame foto — contiene il pallino stato */
.card-header-strip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px 4px;
  flex-shrink: 0;
}
.card-status-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.card-status-dot.s-pending { background: var(--red); }
.card-status-dot.s-ok      { background: #4caf82; }

.card-fmt-badge {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,0.72); color: #fff;
  font-size: 0.58rem; font-weight: 600;
  padding: 2px 7px; border-radius: 20px;
  backdrop-filter: blur(4px); z-index: 5;
}

.card-side-btns {
  position: absolute; top: 6px; right: 6px;
  display: flex; flex-direction: column; gap: 4px; z-index: 5;
}
.card-side-btn {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  font-size: 0.75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; backdrop-filter: blur(4px);
}
.card-side-btn:hover { background: rgba(185,11,16,0.75); color: #fff; border-color: var(--red); }
.card-side-btn.del:hover { background: rgba(185,40,40,0.85); }

.card-body { padding: 7px 9px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card-name {
  font-size: 0.66rem; font-weight: 500; color: var(--text-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Card controls row */
.card-controls { display: flex; align-items: center; gap: 4px; }
.card-fmt-btn {
  flex: 0 1 auto; min-width: 0; max-width: 90px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px; color: var(--text-sub);
  font-size: 0.58rem; font-family: inherit;
  cursor: pointer; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all 0.15s;
}
.card-fmt-btn:hover { border-color: #4a90d9; color: var(--text); }
.card-fmt-btn.has-fmt { border-color: rgba(56,116,240,0.55); color: var(--text); background: rgba(56,116,240,0.15); }

/* Fit/Fill separati sulla card */
.card-ff {
  padding: 4px 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px; color: var(--muted);
  font-size: 0.58rem; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: all 0.15s; flex-shrink: 0;
}
.card-ff:hover { background: rgba(255,255,255,0.1); }
.card-ff.ff-on { background: rgba(56,116,240,0.15); border-color: rgba(56,116,240,0.5); color: #7baef8; font-weight: 600; }

.card-qty { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.cqb {
  width: 20px; height: 20px; border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text); font-size: 0.72rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s;
}
.cqb:hover { background: rgba(255,255,255,0.14); }
.card-qty-val { width: 18px; text-align: center; font-size: 0.74rem; font-weight: 600; color: var(--text); }

/* DPI warning bar on card */
.card-dpi-bar {
  padding: 3px 6px; border-radius: 4px;
  font-size: 0.58rem; font-weight: 600; text-align: center; display: none;
}
.card-dpi-bar.warn { display: block; background: rgba(240,160,32,0.15); color: #f0c060; }
.card-dpi-bar.bad  { display: block; background: rgba(200,50,50,0.15);  color: #e08080; }

/* ── Edit Modal ── */
.edit-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: fadeIn 0.15s ease;
}
.edit-modal-box {
  background: var(--anthracite);
  border: 1px solid rgba(185,11,16,0.3);
  border-radius: 14px; width: 100%; max-width: 500px;
  max-height: calc(100vh - 32px);
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 24px 72px rgba(0,0,0,0.7);
  animation: slideUp 0.2s ease;
  display: flex; flex-direction: column;
}
.em-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 9px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.em-photo-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.em-fmt-badge {
  background: rgba(185,11,16,0.2); border: 1px solid rgba(185,11,16,0.35);
  color: #e8a0a2; font-size: 0.64rem; font-weight: 600;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.em-fmt-badge:hover {
  background: rgba(185,11,16,0.38); border-color: rgba(185,11,16,0.65); color: #f8c0c2;
}
.em-fmt-badge::after { content: ' ▾'; font-size: 0.6rem; opacity: 0.7; }
.em-photo-name {
  font-size: 0.74rem; color: var(--text-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.em-close {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted); font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.15s; margin-left: 8px;
}
.em-close:hover { background: rgba(200,50,50,0.2); color: #e08080; }

/* Panel center inside modal */
.edit-modal-box .panel-center {
  background: #0f1014;
  position: relative; overflow: hidden;
  height: 340px; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 8px; padding: 10px 14px 8px;
}
@media (min-width: 768px) {
  .edit-modal-box { max-width: 660px; }
}
/* 541-767px restava sul valore fisso di base (340px) perche' questa regola
   partiva solo da 768px in su — colma il buco tra le due media query sotto. */
@media (min-width: 541px) {
  .edit-modal-box .panel-center { height: clamp(340px, 45vh, 520px); }
}
@media (max-width: 540px) {
  /* ── Edit modal mobile: massimizza il frame ── */

  /* Overlay senza padding laterale per sfruttare tutta la larghezza */
  .edit-modal-overlay { padding: 0; align-items: flex-end; }
  .edit-modal-box {
    border-radius: 16px 16px 0 0;
    max-height: 96vh;
    max-width: 100%;
  }

  /* Panel-center: 50vh garantisce ~280px di frame netto su qualsiasi telefono */
  .edit-modal-box .panel-center {
    height: clamp(300px, 50vh, 460px);
    padding: 8px 10px 6px;
    gap: 6px;
  }
  /* Frame verticale: più spazio al crop — quality/notes raggiungibili con scroll */
  .edit-modal-box.em-portrait .panel-center {
    height: clamp(360px, 64vh, 520px);
  }
  .edit-modal-box.em-portrait { max-height: 98vh; }
  /* Quality/notes: scrollabili sotto il frame su mobile portrait */
  .edit-modal-box.em-portrait .em-bottom-row {
    flex-direction: column;
  }
  .edit-modal-box.em-portrait .em-quality {
    border-right: none; border-bottom: 1px solid var(--border);
  }

  /* Controlli più compatti: recuperano ~25px da cedere al frame.
     Gap portato da 5 a 8px: icone piu' piccole (30px) sono sotto la soglia
     di tocco comoda, un gap maggiore riduce il rischio di toccare il bottone
     sbagliato senza dover rinunciare allo spazio guadagnato per il frame. */
  .edit-modal-box .crop-controls { gap: 8px; padding-bottom: 4px; }
  .edit-modal-box .bi   { width: 30px; height: 30px; font-size: 0.82rem; }
  .edit-modal-box .bc   { padding: 4px 10px; font-size: 0.64rem; }
  .edit-modal-box .btn-row { gap: 4px; }
  .edit-modal-box .zoom-row { gap: 7px; }
  .edit-modal-box .ffb  { padding: 5px 3px; font-size: 0.62rem; }

  /* Sezione qualità: compatta */
  .em-quality { padding: 6px 10px 8px; }
  .em-note    { padding: 6px 10px 10px; }
  .s-lbl      { font-size: 0.52rem; margin-bottom: 4px; }
  .si         { padding: 4px 7px; }
  .si-l       { font-size: 0.5rem; margin-bottom: 1px; }
  .si-v       { font-size: 0.72rem; }
  .alert      { padding: 5px 8px; font-size: 0.64rem; margin-bottom: 6px; }
  .note-ta    { min-height: 52px; font-size: 0.68rem; }
}
.edit-modal-box .panel-center::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
}
.edit-modal-box .crop-controls { max-width: 100%; flex-shrink: 0; }
.edit-modal-box .crop-wrap { flex: 1; min-height: 0; overflow: hidden; }
/* ── Edit modal: strumenti luce/filtri ── */
.em-tool-row {
  display: flex; gap: 5px; width: 100%;
}
.em-tool-btn {
  flex: 1; padding: 5px 6px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-sub); font-size: 0.63rem;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.em-tool-btn.active { background: rgba(56,116,240,0.18); border-color: rgba(56,116,240,0.55); color: #7baef8; }
.em-tool-panel {
  display: none; flex-direction: column; gap: 8px;
  background: rgba(0,0,0,0.18); border-radius: 8px; padding: 10px 12px;
  width: 100%; border: 1px solid var(--border);
}
.em-tool-panel.open { display: flex; }
.em-bc-row { display: flex; align-items: center; gap: 8px; }
.em-bc-lbl { font-size: 0.6rem; color: var(--muted); width: 56px; flex-shrink: 0; }
.em-bc-val { font-size: 0.64rem; color: var(--text); width: 34px; text-align: right; flex-shrink: 0; }
.em-bc-sl {
  flex: 1; -webkit-appearance: none; height: 3px;
  background: linear-gradient(to right, var(--red) 0%, var(--red) 50%, rgba(255,255,255,0.15) 50%);
  border-radius: 2px; outline: none; cursor: pointer;
}
.em-bc-sl::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--red); border: 2px solid #fff; cursor: pointer;
}
.em-filter-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.em-filter-btn {
  padding: 4px 10px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text-sub); font-size: 0.62rem;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.em-filter-btn.on { background: rgba(56,116,240,0.18); border-color: rgba(56,116,240,0.55); color: #7baef8; }
.em-panel-reset {
  font-size: 0.58rem; color: var(--muted); cursor: pointer;
  border: none; background: none; font-family: inherit;
  text-decoration: underline; padding: 0; align-self: flex-start;
}

/* Bottom row: qualità + note affiancate su desktop */
.em-bottom-row {
  display: flex; flex-shrink: 0; border-top: 1px solid var(--border);
}
/* Conferma button — verde solido */
.bi-confirm {
  width: auto !important; padding: 0 12px !important;
  background: #4caf82 !important; border-color: #4caf82 !important;
  color: #fff !important; font-size: 0.7rem !important;
  font-weight: 600 !important; letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}
.bi-confirm:hover { background: #3d9970 !important; border-color: #3d9970 !important; }

/* Tool panels wrapper (fuori dal panel-center) */
.em-tool-panels-wrap {
  padding: 0 12px 2px; flex-shrink: 0;
}
.em-tool-panels-wrap .em-tool-panel { border-radius: 8px; }

.em-quality {
  flex: 1; padding: 5px 12px 4px; border-right: 1px solid var(--border);
}
.em-note {
  flex: 1; padding: 5px 12px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.note-ta { flex: 1; min-height: 52px; resize: vertical; }
@media (max-width: 540px) {
  .em-bottom-row { flex-direction: column; }
  .em-quality { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── Step 2 bottom bar ──
   Riga singola con flex + order (stesso pattern di ordine-vintage.php)
   invece dei blocchi left/center/right annidati: sul desktop tutti i figli
   stanno su una riga, con .step2-total che assorbe lo spazio libero tra i
   due gruppi di bottoni; su mobile "order" li riorganizza su due righe. */
.step2-bottom {
  position: sticky; bottom: 0;
  background: var(--anthracite);
  border-top: 1px solid var(--border);
  padding: 9px 20px;
  display: flex; align-items: center;
  gap: 12px; z-index: 50; flex-shrink: 0;
}
.step2-total { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.total-amount-row { display: flex; align-items: center; gap: 6px; }
/* Bottone "Conferma tutto": rosso pieno, stesso trattamento di ordine-vintage.php */
.btn-conferma-tutto {
  padding: 9px 18px; border-radius: 8px;
  background: var(--red);
  border: none;
  color: #fff; font-size: 0.78rem; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.btn-conferma-tutto:hover { background: #900; }
@media (max-width: 599px) {
  /* Footer ordine: due righe su mobile, per evitare l'overflow orizzontale
     che spingeva "Procedi con l'ordine" fuori dallo schermo (nascosto oltre
     il bordo destro invece che andare a capo). Il carrello perde il testo
     e resta solo icona, cosi' la riga 1 (indietro + carrello + totale) ha
     piu' respiro — stesso trattamento del bottone carrello in vintage.

     ALTEZZA: qui sotto mancavano gli stessi ritocchi gia' fatti in
     ordine-vintage.css per lo stesso identico blocco — etichetta "Totale"
     nascosta, importo rimpicciolito, padding dei bottoni ridotto. Senza
     quei ritocchi la riga 1 restava a tre righe di testo (etichetta +
     importo grande + dettaglio) invece di due, e la barra risultava
     visibilmente piu' alta di quella di ordine-vintage.php a parita' di
     contenuto — vedi il confronto negli screenshot allegati al task. */
  .step2-bottom { flex-wrap: wrap; padding: 8px 12px 9px; gap: 6px 8px; }
  .btn-back-text { order: 1; flex: 0 0 auto; padding: 8px 0; }
  #btnStep2Cart {
    order: 2; flex: 0 0 auto;
    padding: 7px 10px;
  }
  #btnStep2Cart .btn-cart-label { display: none; }
  .step2-total {
    order: 3; flex: 1 1 auto; align-items: flex-end; text-align: right;
  }
  /* "Totale ordine" è ridondante accanto alla cifra: la riga in meno è
     il risparmio di spazio più grande di tutto il blocco. */
  .total-label { display: none; }
  .total-amount { font-size: 0.9rem; }
  .total-breakdown { font-size: 0.58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Proporzioni 35/60, ancora più sbilanciate di quelle di
     ordine-vintage.php (40/55): "Conferma tutto" è una parola sola e sta
     stretta anche stringendo il padding; "Procedi con l'ordine" ha tre
     parole più l'icona e tiene il margine largo anche sugli schermi più
     stretti (verificato fino a 360px). */
  .btn-conferma-tutto {
    order: 4; flex: 1 1 35%;
    font-size: 0.68rem; padding: 8px 6px; white-space: nowrap;
    display: flex; align-items: center; justify-content: center;
  }
  #btnStep2Procedi {
    order: 5; flex: 1 1 60%;
    padding: 8px 10px; font-size: 0.7rem;
    justify-content: center;
  }
}

/* Format picker dropdown */
.fmt-picker-dropdown {
  position: fixed; z-index: 600;
  background: var(--anthracite);
  border: 1px solid rgba(185,11,16,0.3);
  border-radius: 10px; padding: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  min-width: 280px;
  max-width: calc(100vw - 24px); /* evita overflow orizzontale su viewport < 304px */
  animation: slideUp 0.15s ease;
}
.fpd-tabs { display: flex; gap: 3px; margin-bottom: 7px; }
.fpd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

/* ── Card canvas preview ── */
.card-thumb-wrap {
  position: relative;
  aspect-ratio: 4/3;
  background: #1a1c22;
  overflow: hidden;
  flex-shrink: 0;
  cursor: grab;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.card-thumb-wrap:active { cursor: grabbing; }
.card-canvas {
  width: 100%; height: 100%;
  display: block;
  -webkit-touch-callout: none;
  pointer-events: none;
}
/* ── Two-finger hint su card thumbnail (mobile) ── */
.card-drag-hint {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.52); backdrop-filter: blur(2px); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s; z-index: 6;
  border-radius: inherit;
}
.card-drag-hint .cdh-icon { font-size: 1.4rem; line-height: 1; }
.card-drag-hint .cdh-text { font-size: 0.58rem; text-align: center; line-height: 1.4; }
.card-thumb-wrap.hinting .card-drag-hint { opacity: 1; }
/* ── Card zoom slider ── */
.card-zoom-row {
  display: flex; align-items: center; gap: 6px;
  padding: 0 2px;
}
.card-zoom-sl {
  flex: 1; -webkit-appearance: none; height: 3px;
  touch-action: pan-y; /* permette lo scroll verticale della pagina */
  background: linear-gradient(to right, var(--red) 0%, var(--red) 0%, rgba(255,255,255,0.28) 0%);
  border-radius: 2px; outline: none; cursor: pointer;
}
body.theme-light .card-zoom-sl {
  background: linear-gradient(to right, var(--red) 0%, var(--red) 0%, rgba(0,0,0,0.14) 0%) !important;
}
.card-zoom-sl::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--red); border: 2px solid #fff; cursor: pointer;
}
.card-zoom-lbl { font-size: 0.58rem; color: var(--muted); width: 26px; text-align: right; flex-shrink: 0; }
.card-zoom-ico { font-size: 0.72rem; color: var(--muted); flex-shrink: 0; }

/* ── Back to top ── */
.btt-btn {
  position: fixed; bottom: 70px; right: 28px; z-index: 1200;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer;
  box-shadow: 0 4px 14px rgba(185,11,16,0.35);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s, transform 0.2s;
}
.btt-btn.btt-visible { opacity: 1; visibility: visible; }
.btt-btn:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(185,11,16,0.45); }

/* ══ Soft shadows in light theme ══ */
body.theme-light .photo-card       { box-shadow: var(--card-shadow); }
body.theme-light .edit-modal-box   { box-shadow: 0 10px 40px rgba(0,0,0,0.14); }
body.theme-light .global-panel     { box-shadow: var(--panel-shadow); }
body.theme-light .fmt-picker-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
body.theme-light .note-ta { background: #f8f9fb; color: var(--text); }
body.theme-light .note-ta::placeholder { color: #aab0bb; }
body.theme-light .custom-fmt-input { background: #f0f2f5; color: var(--text); }
body.theme-light .fb, body.theme-light .ft { color: var(--text-sub); background: #f0f2f5; }
body.theme-light .fb.on  { background: rgba(56,116,240,0.1); border-color: rgba(56,116,240,0.45); color: #1a56d4; }
body.theme-light .ft.on  { background: rgba(56,116,240,0.1); border-color: rgba(56,116,240,0.45); color: #1a56d4; }
body.theme-light .ffb    { background: #f0f2f5; color: var(--text-sub); }
body.theme-light .ffb.on       { background: rgba(56,116,240,0.1); border-color: rgba(56,116,240,0.45); color: #1a56d4; }
body.theme-light .ffb.on small { color: rgba(26,86,212,0.7); }
body.theme-light .fb.on small  { color: rgba(26,86,212,0.7); }
body.theme-light .card-fmt-btn  { background: #f0f2f5; color: var(--text-sub); }
body.theme-light .card-fmt-btn.has-fmt { background: rgba(56,116,240,0.09); border-color: rgba(56,116,240,0.4); color: #1a56d4; }
body.theme-light .card-ff       { background: #f0f2f5; color: var(--text-sub); }
body.theme-light .card-ff.ff-on { background: rgba(56,116,240,0.1); border-color: rgba(56,116,240,0.4); color: #1a56d4; }
body.theme-light .cqb           { background: #f0f2f5; }
body.theme-light .bi            { background: #f0f2f5; color: var(--text-sub); }
body.theme-light .bi.on         { background: rgba(56,116,240,0.1); border-color: rgba(56,116,240,0.45); color: #1a56d4; }
body.theme-light .crop-wrap     { background: #e8ebef; }
body.theme-light .zoom-slider   { background: linear-gradient(to right, var(--red) 0%, var(--red) 35%, #d0d3d8 35%); }
body.theme-light .zoom-thumb    { background: var(--red); }
body.theme-light .site-header   { background: #ffffff; }
body.theme-light .topbar-count  { color: var(--muted); }
/* ── Extra light-theme overrides ── */
body.theme-light .carta-btn          { background: #f0f2f5; border-color: rgba(0,0,0,0.1); color: var(--text-sub); }
body.theme-light .carta-btn small    { color: var(--muted); }
body.theme-light .carta-btn.on       { background: rgba(56,116,240,0.1); border-color: rgba(56,116,240,0.45); color: #1a56d4; }
body.theme-light .carta-btn.on small { color: rgba(26,86,212,0.7); }
body.theme-light .photo-card         { background: #ffffff; border-color: rgba(0,0,0,0.08); }
body.theme-light .photo-card:hover   { border-color: rgba(0,0,0,0.15); }
body.theme-light .card-thumb-wrap    { background: #dde0e5; }
body.theme-light .card-name          { color: var(--text); }
body.theme-light .bqb                { background: #f0f2f5; border-color: rgba(0,0,0,0.1); color: var(--text); }
body.theme-light .bqb:hover          { background: #e2e5ea; }
body.theme-light .bc                 { background: #f0f2f5; border-color: rgba(0,0,0,0.1); color: var(--text-sub); }
body.theme-light .bc:hover           { background: #e2e5ea; color: var(--text); }
body.theme-light .step2-bottom       { background: #f5f6f8; border-top-color: rgba(0,0,0,0.1); }
body.theme-light .total-breakdown    { color: rgba(0,0,0,0.55); }
body.theme-light .global-panel       { background: #f5f6f8; border-bottom-color: rgba(0,0,0,0.08); }
body.theme-light .fmt-picker-dropdown{ background: #ffffff; border-color: rgba(185,11,16,0.25); }
body.theme-light .em-tool-btn        { background: #f0f2f5; border-color: rgba(0,0,0,0.1); color: var(--text-sub); }
body.theme-light .em-tool-btn.active { background: rgba(56,116,240,0.1); border-color: rgba(56,116,240,0.45); color: #1a56d4; }
body.theme-light .em-tool-panel      { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body.theme-light .em-filter-btn      { background: #f0f2f5; border-color: rgba(0,0,0,0.1); color: var(--text-sub); }
body.theme-light .em-filter-btn.on   { background: rgba(56,116,240,0.1); border-color: rgba(56,116,240,0.45); color: #1a56d4; }
body.theme-light .em-bc-sl           { background: linear-gradient(to right, var(--red) 0%, var(--red) 50%, #d0d3d8 50%); }
body.theme-light .zoom-sl            { background: linear-gradient(to right, var(--red) 0%, var(--red) 35%, #d0d3d8 35%); }
/* ── Edit modal light-theme fixes ── */
body.theme-light .edit-modal-box .panel-center { background: #eaecf0; }
body.theme-light .em-close   { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: var(--text-sub); }
body.theme-light .em-close:hover { background: rgba(200,50,50,0.12); color: var(--red); }
body.theme-light .em-fmt-badge { color: var(--red); background: rgba(230,57,70,0.1); border-color: rgba(230,57,70,0.3); }
/* ── Step 1 (upload) light-theme fixes ── */
body.theme-light .step-sub           { color: var(--muted); }
body.theme-light .upload-zone        { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.02); }
body.theme-light .upload-zone:hover,
body.theme-light .upload-zone.drag-over { border-color: var(--red); background: rgba(230,57,70,0.05); }
body.theme-light .upload-icon        { color: rgba(0,0,0,0.2); }
body.theme-light .upload-hint        { color: var(--muted); }
body.theme-light .upload-item        { background: #f5f6f8; border-color: rgba(0,0,0,0.08); }
body.theme-light .upload-remove      { background: rgba(0,0,0,0.05); color: var(--muted); }
body.theme-light .upload-remove:hover{ background: rgba(230,57,70,0.12); color: var(--red); }
/* ── Step 3/4 shared text fixes ── */
body.theme-light .btn-back-text      { color: var(--muted); }
body.theme-light .btn-back-text:hover{ color: var(--text); }
/* ── Step 3: form inputs ── */
body.theme-light .form-input         { background: #ffffff; border-color: rgba(0,0,0,0.18); color: var(--text); }
body.theme-light .form-input:focus   { border-color: var(--red); }
body.theme-light .form-input::placeholder { color: #aab0bb; }
/* ── Step 3: delivery / payment cards ── */
body.theme-light .opt-card           { background: #f8f9fb; border-color: rgba(0,0,0,0.1); }
body.theme-light .opt-card:hover     { background: #f0f2f5; border-color: rgba(0,0,0,0.18); }
body.theme-light .opt-card.on        { background: rgba(230,57,70,0.06); border-color: var(--red); }
body.theme-light .opt-magg           { background: rgba(0,0,0,0.07); color: var(--muted); }
body.theme-light .opt-magg.disc      { background: rgba(76,175,130,0.12); color: #2d8a62; }
body.theme-light .opt-orario         { color: var(--red); }
body.theme-light .opt-badge          { background: rgba(76,175,130,0.12); color: #2d8a62; }
/* ── Step 3: totale box ── */
body.theme-light .totale-box         { background: #f0f2f5; border-color: rgba(230,57,70,0.15); }
body.theme-light .totale-row         { color: var(--muted); border-bottom-color: rgba(0,0,0,0.07); }
body.theme-light .totale-row.green   { color: #2d8a62; }
body.theme-light .totale-row.finale  { color: var(--text); }
body.theme-light .totale-disclaimer  { color: var(--muted); }
/* ── Step 3: incomplete banner ── */
body.theme-light .incomplete-banner  { background: rgba(240,160,32,0.07); border-color: rgba(200,130,0,0.3); }
body.theme-light .incomplete-banner-text      { color: #7a5800; }
body.theme-light .incomplete-banner-text strong { color: #5c3f00; }
body.theme-light .incomplete-banner-list      { color: rgba(100,70,0,0.75); }
body.theme-light .incomplete-banner .btn-go-back {
  background: rgba(200,130,0,0.12); border-color: rgba(200,130,0,0.4); color: #7a5800;
}
body.theme-light .incomplete-banner .btn-go-back:hover {
  background: rgba(200,130,0,0.22); color: #5c3f00;
}
/* ── Step 3: privacy block ── */
body.theme-light .privacy-check-block { background: #f8f9fb; border-color: rgba(0,0,0,0.09); }
body.theme-light .upload-progress-track { background: rgba(0,0,0,0.1); }
body.theme-light .si                  { background: #f0f2f5; }
/* ── Step 4: riepilogo ── */
body.theme-light .riepilogo-row-v         { color: var(--muted); border-bottom-color: rgba(0,0,0,0.07); }
body.theme-light .riepilogo-row-v strong  { color: var(--text); }
body.theme-light .riepilogo-row-v.total strong { color: var(--red); }
body.theme-light .riepilogo-foto-item     { background: #f0f2f5; }
body.theme-light #btn-cart { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.2) !important; color: var(--text) !important; }
body.theme-light .invio-nota              { color: var(--muted); }
body.theme-light .warn-nota              { color: #7a5800; background: rgba(240,160,32,0.08); border-color: rgba(200,130,0,0.3); }

/* ══ Theme toggle button ══ */
.theme-toggle {
  background: none; border: 1px solid var(--border);
  border-radius: 20px; cursor: pointer;
  padding: 4px 10px; font-size: 0.72rem;
  color: var(--muted); font-family: inherit;
  display: flex; align-items: center; gap: 5px;
  transition: all 0.2s; white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--red); color: var(--text); }
.theme-toggle .tt-icon { font-size: 0.85rem; }

/* ════════════════════════════════
   TARGET DI TOCCO — dispositivi con puntatore impreciso (dito)
   Non tocca la dimensione visiva su mouse/trackpad (pointer:fine): la
   griglia foto e' densa e ottimizzata per quel caso. Su touch i bottoni
   restano piccoli (ridimensionarli spostrebbe le righe flex strette che
   li contengono, es. +/- quantita' affiancati a 2px di distanza), ma lo
   spazio tra loro aumenta: e' la mitigazione che WCAG 2.5.8 prevede per
   target sotto i 44px, per ridurre il rischio di toccare il controllo
   sbagliato senza dover riprogettare il layout desktop.
   .em-close (unico bottone isolato, non in coppia/gruppo) puo' invece
   crescere in sicurezza senza rischio di sovrapporsi a un vicino. */
@media (pointer: coarse) {
  .card-qty { gap: 8px; }
  .bulk-qty-controls { gap: 8px; }
  .card-side-btns { gap: 8px; }

  .em-close {
    width: 34px; height: 34px;
  }
}