/* Pink Print Designer — Vistaprint-style size/guide overlay + design-help upsell */

/* Use the site font (Inter) for the editor UI — the bundled 'titillium' subset lacks
   Lithuanian glyphs (ą č ę ė į š ų ū ž). No !important, so the pppd-sprites icon font
   (which uses !important) is preserved; specificity (1,0,1) beats the plugin's
   "#pppd-container *{font-family:titillium}" rule regardless of stylesheet order. */
body #pppd-container,
body #pppd-container *,
body #pppd-fs-topbar,
body #pppd-fs-topbar *{
	font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.pppd-guides-overlay{position:absolute;top:0;left:0;pointer-events:none;z-index:5;}
.pppd-guides-overlay *{box-sizing:border-box;}

/* Grey shading of the bleed margin (the ring outside the cut line that gets trimmed off).
   Semi-transparent so the customer sees what's in the chop zone; print area inside stays clear. */
.pppd-bleed-shade{position:absolute;background:rgba(90,98,110,0.42);pointer-events:none;}

/* Guide rectangles (subtle dashed, like Vistaprint) */
.pppd-guide-rect{position:absolute;pointer-events:none;}
.pppd-guide-bleed{border:1px dashed #dc2626;}   /* Kirtimo linija (cut line) — red */
.pppd-guide-safe{border:1px dashed #16a34a;}    /* Saugi zona (safety)       — green */

/* Legend pills, top-right (outlined, like Vista's Safety Area / Bleed) */
.pppd-legend{position:absolute;top:-28px;right:0;display:flex;gap:7px;}
.pppd-legend-pill{font:600 11px/1 Inter,Arial,sans-serif;padding:4px 10px;border-radius:11px;
  background:#fff;border:1px solid;white-space:nowrap;}
.pppd-legend-pill.safe{color:#16a34a;border-color:#86efac;}
.pppd-legend-pill.bleed{color:#dc2626;border-color:#fca5a5;}

/* Dimension annotations (one per axis = trim size in mm, caliper style) */
.pppd-dim{position:absolute;}
.pppd-dim-x{height:0;border-top:1px solid #cbd5e1;}
.pppd-dim-y{width:0;border-left:1px solid #cbd5e1;}
.pppd-dim-x:before,.pppd-dim-x:after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:#cbd5e1;}
.pppd-dim-x:before{left:0;}.pppd-dim-x:after{right:0;}
.pppd-dim-y:before,.pppd-dim-y:after{content:"";position:absolute;left:-4px;width:9px;height:1px;background:#cbd5e1;}
.pppd-dim-y:before{top:0;}.pppd-dim-y:after{bottom:0;}
.pppd-dim-label{position:absolute;background:#fff;color:#475569;font:600 12px/1 Inter,Arial,sans-serif;
  padding:2px 6px;white-space:nowrap;}
.pppd-dim-x .pppd-dim-label{left:50%;top:-9px;transform:translateX(-50%);}
.pppd-dim-y .pppd-dim-label{top:50%;left:-3px;transform:translate(-100%,-50%);}

/* Toggle button (injected into the top toolbar) */
#pppd-btn-guides{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
#pppd-btn-guides.pppd-guides-on{color:#f26522;}

/* Hidden state */
.pppd-guides-hidden .pppd-guides-overlay{display:none;}

/* Design-help upsell CTA */
.pppd-design-help{position:fixed;right:18px;bottom:18px;z-index:60;background:#f26522;color:#fff !important;
  font:600 13px/1 Inter,Arial,sans-serif;padding:10px 16px;border-radius:24px;text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.18);display:inline-flex;align-items:center;gap:7px;}
.pppd-design-help:hover{background:#d9551a;color:#fff !important;}