/* =========================
   GLOBAL
========================= */
* { box-sizing: border-box; }

:root{
  --ui-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-main: "Russo One", var(--ui-font);

  /* doar titlu */
  --text: #111;

  /* pret + reducere */
  --accent: #d60000;

  --bg: #fff;

  /* Preview bleed (print overrides to 0mm) */
  --bleed-mm: 3mm;
  --safe-mm: 10mm;

  --a4-w: 210mm;
  --a4-h: 297mm;
  --a4-w-land: 297mm;
  --a4-h-land: 210mm;

  /* cheie: latimea "cutiei" imaginii (badge ancorat aici) */
  --imgbox-w: 78mm;       /* portrait */
  --imgbox-w-half: 52mm;  /* landscape half */

  /* badge size */
  --badge-w: 34mm;        /* portrait */
  --badge-w-half: 24mm;   /* landscape half */
}

html, body { height: 100%; }

body{
  margin: 0;
  font-family: var(--ui-font);
  background: #f6f6f6;
  color: #111;
}

/* =========================
   APP LAYOUT (2 columns)
========================= */
.app{
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 100vh !important;
  width: 100% !important;
}

/* Left panel */
.panel{
  flex: 0 0 420px !important;
  width: 420px !important;
  height: 100vh !important;
  overflow: auto !important;
  padding: 16px;
  background: #fff;
  border-right: 1px solid #e6e6e6;
}

.panel h1{ margin: 0 0 12px; font-size: 18px; }

.grid{ display: grid; gap: 10px; }
label{ display: grid; gap: 6px; font-size: 13px; }
.inline{ display: flex; align-items: center; gap: 10px; }

input[type="text"], input[type="number"], select{
  padding: 10px;
  border: 1px solid #dadada;
  border-radius: 10px;
  outline: none;
  background: #fff;
}
input[type="file"]{ font-size: 12px; }

fieldset.badges{
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 10px;
}
legend{ font-size: 12px; padding: 0 6px; }

.hint{
  font-size: 12px;
  color: #666;
  margin: 6px 0 0;
}

.btnSecondary{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  color: #111;
  cursor: pointer;
}
.btnSecondary:hover{ filter: brightness(0.98); }

/* =========================
   PREVIEW COLUMN
========================= */
.preview{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f2f2f2;
}

.previewBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  font-size: 13px;
  color: #444;
}

.previewLeft{
  display: flex;
  align-items: center;
  gap: 12px;
}

.printSelect{
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 13px;
  background: #fff;
}

.foldToggle{
  font-size: 12px;
  color: #444;
}

.btnPrintTop{
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #111;
  color: #fff;
  cursor: pointer;
}
.btnPrintTop:hover{ filter: brightness(1.05); }

.previewWrap{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  display: grid !important;
  place-items: start !important;
  padding: 14px;
}

#previewSurface{
  display: grid;
  place-items: start;
  padding: 24px;
}

/* =========================
   PAGE + SHELL
========================= */
.posterShell{
  position: relative;
  background: var(--bg);
  overflow: hidden;
  color: #111;
}

/* preview page includes bleed */
.pageFull{
  position: relative;
  width: calc(var(--a4-w) + (2 * var(--bleed-mm)));
  height: calc(var(--a4-h) + (2 * var(--bleed-mm)));
  background: var(--bg);
}

.pageFull.landscape{
  width: calc(var(--a4-w-land) + (2 * var(--bleed-mm)));
  height: calc(var(--a4-h-land) + (2 * var(--bleed-mm)));
}

/* preview trim guide */
.trimBox{
  position: absolute;
  left: var(--bleed-mm);
  top: var(--bleed-mm);
  width: var(--a4-w);
  height: var(--a4-h);
  outline: 1px dashed rgba(0,0,0,.2);
  pointer-events: none;
}
.pageFull.landscape .trimBox{
  width: var(--a4-w-land);
  height: var(--a4-h-land);
}

/* =========================
   POSTER (footer always bottom)
========================= */
.poster{
  position: absolute;
  left: var(--bleed-mm);
  top: var(--bleed-mm);
  width: var(--a4-w);
  height: var(--a4-h);
  padding: var(--safe-mm);

  display: flex;
  flex-direction: column;
  gap: 6mm;
}

.pageFull.landscape .poster{
  width: var(--a4-w-land);
  height: var(--a4-h-land);
}

/* Title: portrait max 3 lines */
.productName{
  width: 100%;
  margin: 0;
  font-family: var(--font-main);
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;

  font-size: 20mm;
  line-height: 1.15;
  letter-spacing: 0.02em;

  color: var(--text);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* portrait */
  overflow: hidden;

  padding-bottom: 1mm; /* previne tăierea glyph-urilor */
}

/* =========================
   IMAGE WRAP + IMAGE BOX (KEY)
========================= */
.productImageWrap{
  position: relative;
  border-radius: 8mm;
  overflow: hidden;
  background: #fff;
  height: 110mm;

  display: grid;
  place-items: center;

  padding: 6mm;
  border: 0.6mm solid rgba(0,0,0,.06);
}

.productImageWrap.isEmpty{
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* cutie îngustă, centrată (badge ancorat aici!) */
.productImageBox{
  position: relative;
  width: var(--imgbox-w);
  max-width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.productImageBox img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* =========================
   BADGES: TOP-RIGHT OVER IMAGE BOX
   transparent (se vede DOAR PNG)
========================= */
.badgeOverlay{
  position: absolute;
  top: 0mm;
  right: 0mm;
  bottom: 0mm;              /* 🔑 permite împingerea textului jos */
  display: flex;
  flex-direction: column;
  gap: 3mm;
  align-items: flex-end;
  pointer-events: none;
}

.badgeOverlay .badgeText{
  margin-top: auto;         /* 🔑 text badge jos */
}

.badgeOverlay .badgeImg{
  width: var(--badge-w);
  height: auto;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  display: block;
}

.badgeOverlay .badgeImg img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

.badgeOverlay .badgeText{
  padding: 3mm 4mm;
  border-radius: 4mm;
  font-size: 6mm;
  font-weight: 800;
  background: #ffff00;
  color: #ff0000;
  text-align: center;
  max-width: 60mm;
}

/* =========================
   PRICE
========================= */
.priceRow{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8mm;
}

.priceNewWrap{
  display: flex;
  align-items: flex-end;
  gap: 3mm;
  min-width: 0;
}

.priceNewInt{
  font-family: var(--font-main);
  font-weight: 400;
  color: var(--accent);
  line-height: 0.95;
  font-size: 46mm;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.priceNewDec{
  font-family: var(--font-main);
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  font-size: 18mm;
  padding-bottom: 6mm;
  white-space: nowrap;
}

.currency{
  font-family: var(--font-main);
  font-weight: 400;
  color: var(--accent);
  font-size: 12mm;
  padding-bottom: 6mm;
  white-space: nowrap;
}

.priceRight{
  display: grid;
  justify-items: end;
  gap: 2mm;
}

.priceOld{
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 12mm;
  color: rgba(0,0,0,.55);
  text-decoration: line-through;
  white-space: nowrap;
}

.discountPill{
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 11mm;
  background: var(--accent);
  color: #fff;
  padding: 2mm 4mm;
  border-radius: 999px;
  white-space: nowrap;
}

/* SGR */
.sgrLine{
  font-family: var(--ui-font);
  font-weight: 800;
  font-size: 7mm;
  color: rgba(0,0,0,.78);
}

/* =========================
   FOOTER BARCODES (always bottom)
========================= */
.footer{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8mm;
  align-items: end;
  
}
.footer{
  margin-top: auto;   /* 🔑 asta îl duce mereu în jos */
}
.barcodeBlock{
  display: grid;
  gap: 2mm;
  justify-items: center;
  text-align: center;
}

.barcodeBlock svg{
  width: 80mm;
  height: 10mm;
}

.barcodeLabel{
  font-family: var(--ui-font);
  font-size: 4mm;
  color: rgba(0,0,0,.62);
}

.footer.oneOnly{
  grid-template-columns: 1fr;
}
.footer.oneOnly .barcodeBlock svg{
  width: 110mm;
}

/* =========================
   LANDSCAPE 2-UP
========================= */
.twoUp{
  position: absolute;
  left: var(--bleed-mm);
  top: var(--bleed-mm);
  width: var(--a4-w-land);
  height: var(--a4-h-land);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.twoUp .half{
  position: relative;
  overflow: hidden;
  padding: var(--safe-mm);
}

.foldLine{
  position: absolute;
  left: calc(var(--bleed-mm) + (var(--a4-w-land) / 2));
  top: var(--bleed-mm);
  width: 0;
  height: var(--a4-h-land);
  border-left: 0.3mm dashed rgba(0,0,0,.25);
  pointer-events: none;
}

.twoUp .half .poster{
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Half sizing */
.isHalf .productName{
  font-size: calc(14mm * var(--title-scale, 1));
  -webkit-line-clamp: 3; /* landscape: max 2 lines */
}

.isHalf .productImageWrap{ height: 70mm; border-radius: 6mm; padding: 4mm; }

.isHalf .productImageBox{
  width: var(--imgbox-w-half);
}

.isHalf .badgeOverlay{ gap: 2mm; }
.isHalf .badgeOverlay .badgeImg{ width: var(--badge-w-half); }
.isHalf .badgeOverlay .badgeText{ font-size: 4.5mm; padding: 2mm 3mm; }

.isHalf .priceNewInt{ font-size: calc(30mm * var(--price-scale, 1)); }
.isHalf .priceNewDec{ font-size: calc(12mm * var(--price-scale, 1)); padding-bottom: 4mm; }
.isHalf .currency{ font-size: 9mm; padding-bottom: 4mm; }
.isHalf .priceOld{ font-size: 9mm; }
.isHalf .discountPill{ font-size: 8mm; }
.isHalf .sgrLine{ font-size: 5.5mm; }
.isHalf .barcodeBlock svg{ width: 55mm; height: 8mm; }

/* =========================
   PRINT
========================= */
.print-only{ display: none; }
.no-print{ display: block; }

@page { margin: 0; }

@media print{
  :root{ --bleed-mm: 0mm; }

  .print-only{ display: block !important; }
  #printRoot{ display: block !important; }

  body * { visibility: hidden !important; }
  #printRoot, #printRoot * { visibility: visible !important; }

  #printRoot{
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
  }

  .trimBox{ display: none !important; }
  .foldLine{ display: none !important; }
  .no-print{ display: none !important; }

  .pageFull{
    break-inside: avoid;
    page-break-inside: avoid;
  }
}


/* =========================
   DYNAMIC SCALES
========================= */
.productName{
  font-size: calc(20mm * var(--title-scale, 1));
}

.priceNewInt{
  font-size: calc(46mm * var(--price-scale, 1));
}

.priceNewDec{
  font-size: calc(18mm * var(--price-scale, 1));
}

.currency{
  font-size: calc(12mm * var(--price-scale, 1));
}

.productImageBox{
  transform: scale(var(--image-scale, 1));
  transform-origin: center;
}


/* =========================
   VEDERE (Landscape Full Poster)
========================= */

.pageFull.vedere .productName{
  font-size: calc(28mm * var(--title-scale, 1));
  -webkit-line-clamp: 2;
}

.pageFull.vedere .productImageWrap{
  height: 80mm;
}

.pageFull.vedere .priceNewInt{
  font-size: calc(52mm * var(--price-scale, 1));
}

.pageFull.vedere .priceNewDec{
  font-size: calc(20mm * var(--price-scale, 1));
}

.pageFull.vedere .currency{
  font-size: calc(14mm * var(--price-scale, 1));
}


/* =========================
   VEDERE LAYOUT FIX
========================= */

.pageFull.vedere .posterContent{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10mm;
}

.pageFull.vedere .leftZone{
  justify-self: center;
}

.pageFull.vedere .rightZone{
  justify-self: center;
}

.pageFull.vedere .productImageWrap{
  height: 90mm;
}

.pageFull.vedere .priceBlock{
  text-align: center;
}

.pageFull.vedere .priceNewInt{
  font-size: calc(60mm * var(--price-scale, 1));
}

.pageFull.vedere .priceNewDec{
  font-size: calc(22mm * var(--price-scale, 1));
}

.pageFull.vedere .currency{
  font-size: calc(16mm * var(--price-scale, 1));
}


/* =========================
   VEDERE EXACT STRUCTURE
========================= */

.vedereRow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-top: 10mm;
}

.pageFull.vedere .productImageWrap{
  height: 110mm;
}

.pageFull.vedere .priceRow{
  justify-content: center;
}

.pageFull.vedere .priceNewWrap{
  align-items: center;
}

.pageFull.vedere .priceNewInt{
  font-size: calc(70mm * var(--price-scale, 1));
}

.pageFull.vedere .priceNewDec{
  font-size: calc(26mm * var(--price-scale, 1));
}
.pageFull.vedere .rightPrice{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pageFull.vedere .priceOld{
  position: relative;
  margin-top: 4mm;
}
/* =========================
   VEDERE – PRETURI FIX
========================= */

/* zona prețului din dreapta */
.pageFull.vedere .rightPrice{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* preÈ› nou */
.pageFull.vedere .priceNewWrap{
  display: flex;
  align-items: baseline;
  justify-content: center;
}

/* preÈ› vechi SUB preÈ› */
.pageFull.vedere .priceOld{
  position: relative;
  display: block;
  margin-top: 4mm;
  font-size: 10mm;
  opacity: 0.6;
}
/* =========================
   VEDERE – FĂRĂ IMAGINE
========================= */

.pageFull.vedere .productImageWrap.isEmpty{
  display: none;
}

.pageFull.vedere .productImageWrap.isEmpty + .priceRow{
  grid-column: 1 / -1;
  justify-content: center;
}
/* =========================
   PORTRET – FĂRĂ IMAGINE (CENTRARE REALĂ)
========================= */

.pageFull:not(.landscape) .productImageWrap.isEmpty{
  display: none;
}

/* containerul posterului devine flex */
.pageFull:not(.landscape) .poster{
  display: flex;
  flex-direction: column;
}

/* când NU ai imagine → centrează TOT */
.pageFull:not(.landscape) .poster:has(.productImageWrap.isEmpty){
  justify-content: center;
}

/* priceRow curat */
.pageFull:not(.landscape) .poster:has(.productImageWrap.isEmpty) .priceRow{
  justify-content: center;
}


/* =========================
   PORTRET – CENTRARE PREȚ
========================= */
.poster.portrait .price-container,
.pageFull:not(.landscape) .priceRow{
  justify-content: center;
}

.pageFull:not(.landscape) .priceRight{
  justify-items: center;
  text-align: center;
}


/* =========================
   VEDERE – PREȚURI CONDIȚIONATE
========================= */

/* implicit (cu imagine) → vertical */
.pageFull.vedere .priceRight{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2mm;
}

/* FĂRĂ imagine → inline */
.pageFull.vedere:has(.productImageWrap.isEmpty) .priceRight{
  flex-direction: row;
  align-items: baseline;
  gap: 6mm;
}


/* =========================
   PREVIEW – TOP LEFT REAL
========================= */
.previewWrap{
  place-items: start !important;
}

#previewSurface{
  place-items: start !important;
}

/* =========================
   PORTRET – PREȚ PERFECT CENTRAT
========================= */

.pageFull:not(.landscape) .priceRow{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2mm;
}

.pageFull:not(.landscape) .priceNewWrap{
  justify-content: center;
}

.pageFull:not(.landscape) .priceRight{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =========================
   VEDERE – ALIGN FIX
========================= */

.pageFull.vedere .priceRight{
  align-items: flex-start;
}



/* =========================
   VEDERE – COMPACT STACK (B)
========================= */

.pageFull.vedere .priceRow{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5mm;          /* 🔥 compact */
}

.pageFull.vedere .priceNewWrap{
  justify-content: center;
}

.pageFull.vedere .priceRight{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1mm;            /* 🔥 compact */
}

.pageFull.vedere .priceOld{
  font-size: 10.5mm;
  opacity: 0.55;
  margin: 0;
}

.pageFull.vedere .discountPill{
  font-size: 11.5mm;
  padding: 1.8mm 4.5mm;
}

/* =========================
   2 COLOANE – CENTRARE DOAR FARA PRET VECHI
========================= */

.twoUp .priceRow:not(:has(.priceOld)){
  display: flex;
  justify-content: center;
}

.twoUp .priceRow:not(:has(.priceOld)) .priceNewWrap{
  justify-content: center;
}
/* =========================
   2 COLOANE – SGR CENTRAT
========================= */

.twoUp .sgrLine{
  text-align: center;
  justify-self: center;
}
/* =========================
   PORTRET – SGR CENTRAT
========================= */

.pageFull:not(.landscape) .sgrLine{
  text-align: center;
  align-self: center;
}
/* =========================
   VEDERE – SGR CONDITIONAL
========================= */

/* implicit (ARE imagine) → stânga */
.pageFull.vedere .sgrLine{
  text-align: right;
  justify-self: start;
}

/* FARA imagine → centru */
.pageFull.vedere:has(.productImageWrap.isEmpty) .sgrLine{
  text-align: center;
  justify-self: center;
}