/* Overlays on the stage (0.15). Geometry comes from stage/overlays.js as
   left / top / width / height / rotate; this file is the look of the box and
   of the handles that show while the Branding panel is open. The layer has
   no transform or opacity of its own, or a blended overlay would blend with
   nothing (an isolated layer has no backdrop). */
#layer-overlays { pointer-events: none; }
.ov { position: absolute; translate: -50% -50%; pointer-events: none; touch-action: none; }
.ov[hidden] { display: none; }
.ov-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; user-select: none; }
.ov[data-fit="stretch"] .ov-media { object-fit: fill; }
.ov-plate { position: absolute; inset: calc(-1 * var(--ov-pad, 0px)); border-radius: var(--ov-pad, 0px); display: none; }
.ov[data-plate="white"] .ov-plate { display: block; background: #FFFFFF; }
.ov[data-plate="black"] .ov-plate { display: block; background: #000000; }

.ov-handle { display: none; position: absolute; width: 18px; height: 18px; margin: -9px; background: #FFE14D; border: 2px solid #14162B; pointer-events: auto; }
.ov-handle.nw { left: 0; top: 0; cursor: nwse-resize; }
.ov-handle.se { left: 100%; top: 100%; cursor: nwse-resize; }
.ov-handle.ne { left: 100%; top: 0; cursor: nesw-resize; }
.ov-handle.sw { left: 0; top: 100%; cursor: nesw-resize; }
.ov-handle.turn { left: 50%; top: -34px; border-radius: 50%; background: #4B5CE4; cursor: grab; }

body[data-branding-open="1"] .ov { pointer-events: auto; cursor: move; outline: 2px dashed rgba(255, 225, 77, .9); }
body[data-branding-open="1"] .ov[data-on="photo"] { outline-color: rgba(75, 92, 228, .95); }
body[data-branding-open="1"] .ov.selected { outline-style: solid; }
body[data-branding-open="1"] .ov.selected .ov-handle { display: block; }
#stage[data-big] .ov-handle { width: 28px; height: 28px; margin: -14px; }

/* branding.theme: the client's accent and font on the review buttons and the
   wait prompt. High contrast keeps its own black and white. */
#stage[data-brand]:not([data-contrast]) #review-actions button { font-family: var(--brand-font, inherit); }
#stage[data-brand]:not([data-contrast]) #review-actions button[data-action="keep"] { background: var(--brand-accent, #fff); color: var(--brand-on-accent, #111); }
#stage[data-brand] #pose-wait, #stage[data-brand] #countdown-pose { font-family: var(--count-font, var(--brand-font, inherit)); }