*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#efece6;color:#111;
font-family:'Barlow',system-ui,sans-serif;}
/* ---------- Toolbar ---------- */
.toolbar{
position:sticky;top:0;z-index:20;
display:flex;justify-content:space-between;align-items:center;gap:16px;
padding:12px 20px;background:#0f0f0f;color:#fff;
box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.brand{display:flex;align-items:center;gap:12px;font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.12em}
.brand img{height:34px;width:auto;filter:invert(1)}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.controls label{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:#c9c9c9}
.controls select,.controls input,.controls button{
font:inherit;padding:9px 14px;border-radius:6px;border:1px solid #333;
background:#1a1a1a;color:#fff;font-family:'Barlow Condensed',sans-serif;
font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:14px;
}
.controls button{background:#d64216;border-color:#d64216;cursor:pointer}
.controls button:hover{background:#ec5a2b}
.controls button.secondary{background:transparent;border-color:#555}
.controls button.secondary:hover{background:#222}
/* ---------- Editor drawer ---------- */
.editor{
position:fixed;top:66px;right:16px;z-index:19;width:320px;max-height:80vh;overflow:auto;
background:#fff;border:1px solid #ddd;border-radius:10px;padding:18px;
box-shadow:0 20px 40px rgba(0,0,0,.2);
}
.editor h2{margin:0 0 4px;font-family:'Bebas Neue',sans-serif;letter-spacing:.08em;font-size:22px}
.editor .hint{margin:0 0 14px;font-size:13px;color:#666}
.editor label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#333;font-weight:700;margin-bottom:12px}
.editor input,.editor textarea{
display:block;width:100%;margin-top:6px;padding:8px 10px;
border:1px solid #ccc;border-radius:6px;font:inherit;font-weight:400;text-transform:none;letter-spacing:normal;color:#111;
}
.editor-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.editor-actions button{padding:8px 14px;border-radius:6px;border:1px solid #d64216;background:#d64216;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.editor-actions button.secondary{background:#fff;color:#333;border-color:#ccc}
.editor .toggle-row{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:normal;font-weight:600}
.editor .toggle-row input{width:auto;margin:0}
.editor button.small{padding:6px 10px;font-size:12px;border-radius:6px;border:1px solid #ccc;background:#fff;color:#333;cursor:pointer;margin-bottom:12px}
.editor-sep{border:none;border-top:1px solid #eee;margin:8px 0 14px}
.editor input[type="file"]{padding:6px;font-size:12px}
/* ---------- A4 sheet ---------- */
.sheet{
width:210mm;height:297mm;
box-sizing:border-box;
margin:20px auto;padding:8mm;
background:#fff;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr 1fr;
gap:0;
overflow:hidden;
box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.sheet.letter{
width:8.5in;height:11in;padding:0.3in;
}
.voucher{min-height:0;min-width:0}
/* ---------- Voucher ---------- */
.voucher{
position:relative;overflow:hidden;color:#fff;
padding:calc(5mm * var(--vscale,1)) calc(6mm * var(--vscale,1));
display:flex;flex-direction:column;
outline:1px dashed rgba(0,0,0,.35);
background:#fff;color:#111;
}
/* wood planks */
.voucher::before{
content:none;position:absolute;inset:0;pointer-events:none;z-index:0;
background:
repeating-linear-gradient(90deg,
rgba(255,255,255,.04) 0 1px,
transparent 1px 4px,
rgba(0,0,0,.15) 4px 5px,
transparent 5px 12px),
repeating-linear-gradient(180deg,
rgba(0,0,0,.25) 0 1px,
transparent 1px 22mm);
mix-blend-mode:overlay;
}
/* flame glow */
.voucher::after{
content:none;position:absolute;left:-4mm;right:-4mm;bottom:-4mm;height:60%;
pointer-events:none;z-index:0;
background:
radial-gradient(ellipse 28% 65% at 8% 100%, #ffcf40 0%, #ff5722 22%, rgba(255,87,34,0) 55%),
radial-gradient(ellipse 24% 55% at 30% 100%, #ffb347 0%, #e34e0a 25%, rgba(227,78,10,0) 55%),
radial-gradient(ellipse 26% 60% at 55% 100%, #ffd75e 0%, #ff6a00 22%, rgba(255,106,0,0) 55%),
radial-gradient(ellipse 24% 55% at 78% 100%, #ffb347 0%, #ff5722 25%, rgba(255,87,34,0) 55%),
radial-gradient(ellipse 28% 65% at 96% 100%, #ffcf40 0%, #e64a0f 22%, rgba(230,74,15,0) 55%),
linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.55) 100%);
filter:blur(.4mm) saturate(1.15);
opacity:.95;
}
.voucher > *{position:relative;z-index:2}
/* Cleavers decoration */
.cleaver{position:absolute;top:calc(5mm * var(--vscale,1));font-size:calc(16mm * var(--vscale,1));line-height:1;opacity:.35;
color:#c0b6a8;text-shadow:0 2px 4px rgba(0,0,0,.7);z-index:1;filter:grayscale(1)}
.cleaver.l{left:2mm;transform:rotate(-28deg)}
.cleaver.r{right:2mm;transform:scaleX(-1) rotate(-28deg)}
/* Voucher scale variables */
.voucher{
--logo-scale:1;
--title-scale:1;
--body-scale:1;
--tagline-scale:1;
--writein-scale:1;
}
/* Top row: sticker (top-left) + logo (right of sticker) */
.top-row{
flex:0 0 auto;
display:flex;align-items:flex-start;gap:calc(4mm * var(--vscale,1));
margin:0 0 calc(3mm * var(--vscale,1));min-height:calc(30mm * var(--vscale,1));
}
.top-row .logo{
flex:1 1 auto;min-width:0;align-self:center;
display:flex;margin:0;
}
.voucher.logo-left .top-row .logo{justify-content:flex-start}
.voucher.logo-center .top-row .logo{justify-content:center}
.voucher.logo-right .top-row .logo{justify-content:flex-end}
.top-row .logo img{
height:calc(28mm * var(--logo-scale) * var(--vscale,1));width:auto;max-width:100%;
object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.voucher.invert-logo .top-row .logo img{filter:invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.voucher.has-bg .top-row .logo img{filter:drop-shadow(0 2px 3px rgba(0,0,0,.85))}
.voucher.has-bg.invert-logo .top-row .logo img{filter:invert(1) drop-shadow(0 2px 3px rgba(0,0,0,.85))}
/* Custom background image layer (cover, centered) */
.bg-img{
position:absolute;inset:0;z-index:0;pointer-events:none;
background-size:cover;background-position:center center;background-repeat:no-repeat;
}
.bg-img::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.55) 100%);
opacity:var(--bg-overlay-opacity,1);
}
/* Per-element overlay behind text — direct background so it can't be clipped
by parent overflow, and independent of the global bg-overlay slider. */
.headline.has-overlay,
.copy.has-overlay,
.tagline.has-overlay,
.top-row .logo.has-overlay{
background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.75) 100%);
padding:5px;margin:-5px;border-radius:4px;
box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.top-row .logo.has-overlay{padding:6px;margin:0}
/* Per-element text outline (subtitle-style stroke) */
.headline.has-outline,
.copy.has-outline,
.tagline.has-outline{
--ow:var(--outline-w,2px);
text-shadow:
calc(var(--ow) * -1) calc(var(--ow) * -1) 0 var(--outline-color,#000),
var(--ow) calc(var(--ow) * -1) 0 var(--outline-color,#000),
calc(var(--ow) * -1) var(--ow) 0 var(--outline-color,#000),
var(--ow) var(--ow) 0 var(--outline-color,#000),
0 calc(var(--ow) * -1) 0 var(--outline-color,#000),
0 var(--ow) 0 var(--outline-color,#000),
calc(var(--ow) * -1) 0 0 var(--outline-color,#000),
var(--ow) 0 0 var(--outline-color,#000);
-webkit-text-stroke:var(--ow) var(--outline-color,#000);
paint-order:stroke fill;
}
/* Logo outline via drop-shadow ring */
.top-row .logo.has-outline img{
--ow:var(--outline-w,2px);
filter:
drop-shadow( var(--ow) 0 0 var(--outline-color,#000))
drop-shadow( calc(var(--ow) * -1) 0 0 var(--outline-color,#000))
drop-shadow( 0 var(--ow) 0 var(--outline-color,#000))
drop-shadow( 0 calc(var(--ow) * -1) 0 var(--outline-color,#000)) !important;
}
/* Editor grouped sections (collapsible) */
.editor details.group{
border:1px solid #e5e5e5;border-radius:8px;margin-bottom:10px;background:#fafafa;
}
.editor details.group[open]{background:#fff}
.editor details.group > summary{
list-style:none;cursor:pointer;padding:8px 10px;
font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;
font-weight:700;font-size:13px;color:#222;
display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.editor details.group > summary::-webkit-details-marker{display:none}
.editor details.group > summary::after{
content:"+";font-size:18px;line-height:1;color:#d64216;font-weight:700;
}
.editor details.group[open] > summary::after{content:"−"}
.editor details.group > .group-body{padding:8px 10px 4px}
.editor .outline-row{
display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:normal;
font-weight:600;margin-bottom:12px;flex-wrap:wrap;
}
.editor .outline-row input[type="checkbox"]{width:auto;margin:0}
.editor .outline-row input[type="range"]{flex:1 1 120px;margin:0;min-width:100px}
.editor .outline-row .ow-val{min-width:1.4em;text-align:right;font-variant-numeric:tabular-nums}
.voucher.has-bg{background:#000;color:#fff}
.voucher.has-bg .tagline{color:#ffd9a8}
.voucher.has-bg::before,.voucher.has-bg::after{display:none}
/* Headline */
.headline{
flex:0 0 auto;
text-align:var(--title-align,center);line-height:.95;margin:0 0 calc(3mm * var(--vscale,1));
font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.03em;
}
.headline .top{display:block;font-size:calc(11mm * var(--title-scale) * var(--vscale,1))}
.headline .bottom{display:block;font-size:calc(9mm * var(--title-scale) * var(--vscale,1));margin-top:1mm;white-space:nowrap}
.headline .amount{color:#d64216}
.voucher.has-bg .headline .amount{color:#ffb347}
/* Body row — flexes to fill remaining voucher height */
.body{
display:flex;margin-top:1mm;
flex:1 1 auto;min-height:0;overflow:hidden;
}
/* Sticker — ALWAYS 25mm × 25mm (fixed physical size); center offset preserved */
.sticker{
flex:0 0 calc(25mm * var(--vscale,1));width:calc(25mm * var(--vscale,1));height:calc(25mm * var(--vscale,1));
margin:calc(2.5mm * var(--vscale,1)) 0 0 calc(2.5mm * var(--vscale,1));
border-radius:50%;
background:radial-gradient(circle at 30% 30%, #ffffff 0%, #e7ded0 100%);
color:#1a1206;
display:flex;align-items:center;justify-content:center;text-align:center;
font-family:'Barlow Condensed',sans-serif;font-weight:700;
font-size:calc(2.4mm * var(--vscale,1));line-height:1.15;letter-spacing:.04em;text-transform:uppercase;
padding:2mm;box-shadow:inset 0 0 0 .3mm rgba(0,0,0,.15), 0 .5mm 1mm rgba(0,0,0,.4);
}
.copy{
flex:1 1 auto;min-width:0;overflow:hidden;
font-family:'Barlow Condensed',sans-serif;font-weight:600;
font-size:calc(3mm * var(--body-scale) * var(--vscale,1));line-height:1.2;text-transform:uppercase;letter-spacing:.02em;
text-align:var(--body-align,left);
}
.copy p{margin:0}
/* Tagline — anchored above writein */
.tagline{
flex:0 0 auto;
margin-top:auto;padding-top:calc(3mm * var(--vscale,1));text-align:var(--tagline-align,center);
font-family:'Caveat',cursive;font-weight:700;
font-size:calc(5mm * var(--tagline-scale) * var(--vscale,1));color:#8a4b18;
}
/* Write-in field — EXACTLY 50mm × 15mm */
.writein-wrap{display:flex;justify-content:center;margin-top:2mm;flex:0 0 auto}
.writein{
width:calc(50mm * var(--vscale,1));height:calc(15mm * var(--vscale,1));background:#fff;border-radius:1mm;
box-shadow:inset 0 0 0 .3mm rgba(0,0,0,.15);
display:flex;align-items:center;justify-content:var(--writein-align,center);text-align:var(--writein-align-txt,center);
padding:1mm 2mm;overflow:hidden;
font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
font-size:calc(2.2mm * var(--writein-scale) * var(--vscale,1));line-height:1.15;letter-spacing:.1em;color:#111;
}
/* ---------- Print ---------- */
@page{size:A4;margin:0}
@page letter{size:letter;margin:0}
@media print{
html,body{background:#fff;margin:0!important;padding:0!important}
.no-print{display:none!important}
.sheet{margin:0!important;box-shadow:none!important;width:210mm;height:297mm;padding:6mm;overflow:hidden}
.sheet.letter{width:8.5in;height:11in;padding:0.25in;page:letter;overflow:hidden}
*{ -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
}
/* Vnorené "Efekty" sekcie v editore */
.editor details.sub{border-top:1px dashed #e5e5e5;margin:2px 0 10px}
.editor details.sub > summary{
list-style:none;cursor:pointer;padding:6px 0;font-size:12px;color:#777;
text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}
.editor details.sub > summary::-webkit-details-marker{display:none}
.editor details.sub > summary::after{content:" +";color:#d64216}
.editor details.sub[open] > summary::after{content:" −"}
.editor .hint.small{font-size:11px;color:#888;margin:0 0 10px}
/* Saved presets (texty / rozloženia) */
.editor .saved-row{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.editor .saved-row select{flex:1 1 auto;min-width:0;padding:6px 8px;border:1px solid #ccc;border-radius:6px;font:inherit;font-weight:400;text-transform:none;letter-spacing:normal}
.editor .saved-row button{padding:6px 10px;font-size:12px;border-radius:6px;border:1px solid #ccc;background:#fff;color:#333;cursor:pointer}
.editor .saved-row button.primary{background:#d64216;border-color:#d64216;color:#fff}
/* Mix hodnôt */
.toolbar{flex-wrap:wrap}
.mixbar{flex:1 1 100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:10px 0 2px;border-top:1px solid #262626;margin-top:6px}
.mixbar-label{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
letter-spacing:.08em;font-size:13px;color:#c9c9c9}
.mixbar-grid{display:flex;gap:6px;flex-wrap:wrap}
.mixbar-grid .mix-cell{display:flex;align-items:center;gap:4px}
.mixbar-grid .mix-cell span{font-size:11px;color:#888;min-width:1.4em;text-align:right}
.mixbar-grid input{width:64px;padding:6px 8px;border-radius:6px;border:1px solid #333;
background:#1a1a1a;color:#fff;font:inherit;font-size:13px}
.mixbar[hidden]{display:none}
.voucher.has-bg .headline,.voucher.has-bg .tagline{text-shadow:0 1px 0 rgba(0,0,0,.6)}