/* ══════════════════════════════════════════════════
   Cutiora — overlay-shared.css

   Single source of truth for the reusable overlay UI that both the
   main editor (js/text-layer-engine.js + js/sticker-engine.js, wired
   up in index.html via css/editor.css) and Photo Booth (same two
   engines, wired up in tools/photobooth.html) render on top of a
   canvas: draggable text layers, draggable stickers, their
   delete/resize/rotate/flip handles, the sticker category pills +
   thumbnail grid, and the generic draw-toolbar button classes.

   Previously these rules were copy-pasted verbatim into a <style>
   block inside tools/photobooth.html (with a comment admitting as
   much) because that page intentionally doesn't load the rest of
   css/editor.css. That meant any future visual tweak to a drag
   handle, a sticker control, or a toolbar button had to be made in
   TWO places by hand, with nothing forcing them to stay in sync.

   Load this file on any page that uses text-layer-engine.js and/or
   sticker-engine.js and/or the .wdt-* draw-toolbar markup — currently
   index.html and tools/photobooth.html. Page-specific bits that
   aren't actually identical between pages (element IDs like
   #wDrawColor vs #wpbDrawColor, or grid breakpoints that differ
   between the two sticker grids) intentionally stay local to each
   page's own stylesheet, since forcing those to match would remove
   real flexibility rather than remove real duplication.
   ══════════════════════════════════════════════════ */

/* ── Text drag wrap + controls ──
   Driven by js/text-layer-engine.js: one .wDragTextWrap per text
   layer, absolutely positioned and dragged/resized/rotated via its
   three corner handles. */
.wDragTextWrap {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  will-change: transform;
  display: inline-block;
}
.wDragTextWrap.txt-selected {
  outline: 2px dashed rgba(255,255,255,0.85);
  outline-offset: 6px;
}
.wDragTextWrap.txt-dragging { cursor: grabbing; }

.wDragText {
  padding: 4px 8px;
  white-space: pre;
  word-break: normal;
  overflow: visible;
  text-align: center;
  line-height: 1.35;
  display: block;
  user-select: none;
  -webkit-user-select: none;
}

.wTxtDel, .wTxtResize, .wTxtRotate {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 2px solid #e60023;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  touch-action: none;
}
.wDragTextWrap.txt-selected .wTxtDel,
.wDragTextWrap.txt-selected .wTxtResize,
.wDragTextWrap.txt-selected .wTxtRotate { display: flex; }
.wTxtDel    { top: -12px; right: -12px; color: #e60023; font-weight: bold; font-size: 13px; cursor: pointer; }
.wTxtResize { bottom: -12px; right: -12px; cursor: nwse-resize; }
.wTxtRotate { bottom: -12px; left: -12px; cursor: alias; }
.wTxtResize::after { content: ''; width: 8px; height: 8px; border-right: 2px solid #e60023; border-bottom: 2px solid #e60023; display: block; }

/* ── Draw toolbar: generic button/group classes ──
   Element-ID-specific rules (e.g. #wDrawColor / #wpbDrawColor sizing)
   intentionally stay in each page's own stylesheet — only the shared
   class-based look lives here. */
.wdt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wdt-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f5f5f5;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  padding: 4px 8px;
}
.wdt-label {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #888;
  margin-right: 2px;
}
.wdt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: #555;
  font-size: 16px;
  transition: background .1s, border-color .1s, color .1s;
}
.wdt-btn:hover { background: #fff8d6; border-color: #e6b800; color: #2c2c2c; }
.wdt-btn.active { background: #2c2c2c; border-color: #2c2c2c; color: #fff; }
.wdt-tool { width: 30px; height: 30px; }

.wdt-save-btn {
  background: #e60023 !important;
  border-color: #e60023 !important;
  color: #fff !important;
  width: auto !important;
  padding: 0 12px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  gap: 4px;
}
.wdt-save-btn:hover { background: #c0001d !important; border-color: #c0001d !important; }

/* ── Sticker system: draggable element + controls ──
   Driven by js/sticker-engine.js: one .wst-el per placed sticker. */
.wst-el {
  position: absolute;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.wst-el.selected { border: 2px dashed #e60023; }
.wst-el:active { cursor: grabbing; }
.wst-el img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
}
.wst-del, .wst-resize, .wst-rotate, .wst-flip {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 2px solid #e60023;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.wst-el.selected .wst-del,
.wst-el.selected .wst-resize,
.wst-el.selected .wst-rotate,
.wst-el.selected .wst-flip { display: flex; }
.wst-del { top: -12px; right: -12px; color: #e60023; font-weight: bold; }
.wst-resize { bottom: -12px; right: -12px; cursor: nwse-resize; }
.wst-rotate { bottom: -12px; left: -12px; cursor: alias; }
.wst-flip { top: -12px; left: -12px; cursor: pointer; color: #e60023; font-size: 14px; }
.wst-resize::after { content: ''; width: 8px; height: 8px; border-right: 2px solid #e60023; border-bottom: 2px solid #e60023; }

/* ── Sticker category pills ── */
.wst-cat {
  flex-shrink: 0;
  background: #f5f5f5;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s;
}
.wst-cat:hover { background: #eee; border-color: #bbb; }
.wst-cat.active { background: #e60023; border-color: #e60023; color: #fff; }

/* ── Sticker thumbnail (picker grid tile) ──
   The grid container itself (#wStickerGrid / #wpbStickerGrid) keeps
   its own column-count/breakpoint rules per page, since those
   genuinely differ — only the individual tile look is shared here. */
.wst-thumb {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  background: #fafafa;
  border: 1.5px solid #eee;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s, border-color 0.12s;
  box-sizing: border-box;
}
.wst-thumb:hover, .wst-thumb:active { transform: scale(1.08); border-color: #e60023; }
.wst-thumb img {
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  object-position: center;
  display: block;
}