/* ══════════════════════════════════════════════════════
   Cutiora — css/sticker-maker.css
   Styles that belong to the Sticker Maker tool only. The shared look
   (.tool-card, .w-upload-zone, .w-btn, nav, footer) comes from main.css
   and the page's own inline block, same as the other tool pages.
   ══════════════════════════════════════════════════════ */

#wSmStage { display: none; flex-direction: column; align-items: center; gap: 12px; }
#wSmChangeRow { display: flex; justify-content: center; width: 100%; }

/* ── the editing viewport: checkerboard shows what is transparent ── */
#wSmViewport {
  position: relative; width: 100%; height: 300px; overflow: hidden;
  border: 3px solid #2c2c2c; border-radius: 12px;
  background-color: #fff;
  background-image: conic-gradient(#e9e6ee 25%, #fff 0 50%, #e9e6ee 0 75%, #fff 0);
  background-size: 20px 20px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: crosshair;
}
#wSmViewport.sm-tool-move { cursor: grab; }
#wSmWork { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
#wSmCanvas, #wSmOverlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#wSmOverlay { pointer-events: none; }
#wSmBrushCursor {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 3;
  border: 2px solid #fff; box-shadow: 0 0 0 1.5px #2c2c2c; border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ── "the cut-out is working" circle (also used while a photo opens) ── */
.sm-busy {
  position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center;
  background: rgba(255, 255, 255, .9); touch-action: none; cursor: progress;
}
.sm-busy.show { display: flex; }
.sm-busy-ring {
  width: 58px; height: 58px; box-sizing: border-box; border-radius: 50%;
  border: 6px solid rgba(44, 44, 44, .2); border-top-color: #E60023;
  animation: smSpin .8s linear infinite;
}
@keyframes smSpin { to { transform: rotate(360deg); } }
.sm-busy-title { font-family: 'Fredoka One', cursive; font-size: 19px; color: #2c2c2c; }
.sm-busy-sub { font: 700 13px 'Nunito', sans-serif; color: #555; max-width: 300px; }
.sm-busy-time { font: 700 12px 'Nunito', sans-serif; color: #888; min-height: 16px; }
.sm-busy-bar { display: none; width: 200px; height: 8px; border: 2px solid #2c2c2c; border-radius: 99px; overflow: hidden; background: #fff; }
.sm-busy-bar.show { display: block; }
.sm-busy-bar i { display: block; height: 100%; width: 0; background: #E60023; transition: width .2s ease; }
.sm-busy .sm-btn { cursor: pointer; }

/* ── zoom row ── */
.sm-zoom { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.sm-zoom-val { font: 700 13px 'Nunito', sans-serif; color: #777; min-width: 48px; text-align: center; }

/* ── tool bar (Move / Erase / Restore / Lasso) ── */
.sm-tools { display: flex; width: 100%; border: 3px solid #2c2c2c; border-radius: 10px; overflow: hidden; }
.sm-tool {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 8px 2px; background: #fff; color: #555; border: none;
  border-inline-start: 3px solid #2c2c2c; font: 700 13px 'Nunito', sans-serif; cursor: pointer;
  touch-action: manipulation;
}
.sm-tool:first-child { border-inline-start: none; }
.sm-tool .ico { font-size: 19px; line-height: 1; }
.sm-tool:not(.active):hover { background: #fff9e0; }
.sm-tool.active { background: #FFE566; color: #2c2c2c; }

.sm-hint { width: 100%; min-height: 20px; text-align: center; font: 700 13px 'Nunito', sans-serif; color: #777; }

.sm-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; width: 100%; }
.sm-opt { display: flex; align-items: center; gap: 8px; font: 700 13px 'Nunito', sans-serif; color: #555; }
.sm-opt input[type=range] { width: 130px; accent-color: #E60023; }
.sm-opt input[type=checkbox] { width: 18px; height: 18px; accent-color: #E60023; }
.sm-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sm-chip {
  border: 2px solid #2c2c2c; background: #fff; color: #2c2c2c; border-radius: 999px; padding: 6px 13px;
  font: 700 12px 'Nunito', sans-serif; cursor: pointer; touch-action: manipulation;
}
.sm-chip.active { background: #FFE566; }

.sm-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.sm-btn {
  min-height: 42px; padding: 8px 14px; background: #fff; color: #2c2c2c; border: 3px solid #2c2c2c;
  border-radius: 10px; font: 700 13px 'Nunito', sans-serif; cursor: pointer; touch-action: manipulation;
}
.sm-btn.round { width: 42px; padding: 0; border-radius: 50%; font-size: 18px; }
.sm-btn:disabled { opacity: .4; cursor: default; }
.sm-btn:not(:disabled):hover { background: #fff9e0; }
.sm-btn:not(:disabled):active { background: #FFE566; }

/* ── outline / shadow box and the live preview ── */
.sm-style { width: 100%; border: 3px solid #2c2c2c; border-radius: 12px; padding: 12px 14px; background: #fffdf3; }
.sm-switch { display: flex; width: fit-content; align-items: center; gap: 8px; font: 700 14px 'Nunito', sans-serif; color: #2c2c2c; cursor: pointer; }
.sm-switch input { width: 19px; height: 19px; accent-color: #E60023; cursor: pointer; }
.sm-style-body { display: none; margin-top: 10px; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.sm-style-body.show { display: flex; }
.sm-swatches { display: flex; align-items: center; gap: 8px; }
.sm-swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 3px solid #2c2c2c; padding: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.sm-swatch.active { outline: 3px solid #E60023; outline-offset: 2px; }
/* "any colour": a rainbow circle with a + so nobody mistakes it for a second white. The real colour input sits
   invisibly on top (main.css sizes every input[type=color] 42x28, hence the higher-specificity rule below).
   Once a colour is picked the circle takes that colour and keeps a small rainbow dot as the "picker" hint. */
.sm-swatch-custom {
  position: relative; display: block; box-sizing: border-box;
  background: conic-gradient(#ff3b3b, #ffd23b, #3bd26b, #3bc8ff, #6b3bff, #ff3bd2, #ff3b3b);
}
.sm-swatch-custom::after {
  content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 800 19px/1 'Nunito', sans-serif; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .65); pointer-events: none;
}
.sm-swatch-custom.picked::after { content: none; }
.sm-swatch-custom.picked::before {
  content: ''; position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; box-sizing: border-box;
  border: 2px solid #2c2c2c; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#ff3b3b, #ffd23b, #3bd26b, #3bc8ff, #6b3bff, #ff3bd2, #ff3b3b);
}
.sm-swatch-custom input[type=color] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; cursor: pointer;
}

/* ── steps bar + step headings (same look as Photo Booth's) ── */
.sm-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
.sm-step-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #2c2c2c; background: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 13px 'Nunito', sans-serif; color: #2c2c2c;
}
.sm-step-dot.active { background: #FFE566; }
.sm-step-dot.done { background: #C9F2C7; }
.sm-step-line { width: 32px; height: 2px; background: #2c2c2c; opacity: .25; }
.sm-step-kicker { font: 700 12px 'Nunito', sans-serif; color: #E60023; margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.sm-step-title { font-family: 'Fredoka One', cursive; font-size: 22px; color: #2c2c2c; margin: 4px 0 16px; font-weight: 400; }
.sm-back-link {
  display: block; margin: 14px auto 0; background: none; border: none; color: #888; cursor: pointer;
  font: 700 14px 'Nunito', sans-serif; text-decoration: underline; touch-action: manipulation;
}
.sm-back-link:hover { color: #2c2c2c; }

#wSmStep2 { flex-direction: column; }   /* display:flex is set by js (goStep) when the step is shown */

/* ── step 2: the finished sticker, shown big on a checkerboard ── */
#wSmDecorWrap {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 260px; padding: 14px;
  border: 3px solid #2c2c2c; border-radius: 12px; box-sizing: border-box; margin-bottom: 14px;
  background-color: #fff;
  background-image: conic-gradient(#e9e6ee 25%, #fff 0 50%, #e9e6ee 0 75%, #fff 0);
  background-size: 20px 20px;
}
#wSmFinal { display: block; max-width: 100%; max-height: min(52vh, 440px); width: auto; height: auto; }
.sm-preview-empty { font: 700 13px 'Nunito', sans-serif; color: #888; background: rgba(255, 255, 255, .85); padding: 6px 12px; border-radius: 8px; }

/* while a job runs nothing else can be pressed (invisible), and the controls only look dimmed
   once the circle is actually on screen (.sm-waiting) — a quick job must not make the page flicker */
#wSmStage.sm-locked .sm-tools, #wSmStage.sm-locked .sm-actions-group, #wSmStage.sm-locked .sm-zoom,
#wSmStage.sm-locked .sm-options, #wSmStage.sm-locked .sm-style, #wSmStage.sm-locked #wSmChangeRow,
#wSmStage.sm-locked .w-btn-row { pointer-events: none; }
#wSmStage.sm-waiting .sm-tools, #wSmStage.sm-waiting .sm-actions-group, #wSmStage.sm-waiting .sm-zoom,
#wSmStage.sm-waiting .sm-options, #wSmStage.sm-waiting .sm-style, #wSmStage.sm-waiting #wSmChangeRow,
#wSmStage.sm-waiting .w-btn-row { opacity: .6; }

/* ── step 2 tabs (Filter / Outline & shadow) — same look as PFP Border's tab bar ── */
.sm-tabs { display: flex; width: 100%; border: 3px solid #2c2c2c; border-radius: 10px; overflow: hidden; }
.sm-tab {
  flex: 1; text-align: center; padding: 10px 4px; background: #fff; color: #555; border: none;
  border-inline-start: 3px solid #2c2c2c; font: 700 13px 'Nunito', sans-serif; cursor: pointer; touch-action: manipulation;
}
.sm-tab:first-child { border-inline-start: none; }
.sm-tab:not(.active):hover { background: #fff9e0; }
.sm-tab.active { background: #FFE566; color: #2c2c2c; }
.sm-panel { display: none; width: 100%; padding-top: 14px; }
.sm-panel.active { display: block; }

/* ── filter gallery: category chips + a horizontal row of thumbnails (same pattern as the Filters tool) ── */
.sm-filter-cats { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.sm-filter-cats::-webkit-scrollbar { height: 6px; }
.sm-filter-cats::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.sm-filter-cat {
  flex: 0 0 auto; border: 2px solid #2c2c2c; background: #fff; color: #2c2c2c; border-radius: 999px; padding: 5px 12px;
  font: 800 12px 'Nunito', sans-serif; cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
.sm-filter-cat:hover { background: #fff9e0; }
.sm-filter-cat.active { background: #E60023; border-color: #E60023; color: #fff; }
.sm-filter-row {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; overflow-anchor: none;
}
.sm-filter-row::-webkit-scrollbar { height: 6px; }
.sm-filter-row::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.sm-filter-btn {
  flex: 0 0 92px; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px solid #2c2c2c; background: #fff; border-radius: 8px; padding: 8px 6px 10px; cursor: pointer;
  font: 700 12px 'Nunito', sans-serif; color: #2c2c2c; text-align: center; scroll-snap-align: start; touch-action: manipulation;
}
.sm-filter-btn:hover { background: #fff9e0; }
.sm-filter-btn.active { background: #FFE566; box-shadow: 3px 3px 0 #2c2c2c; }
.sm-filter-thumb {
  display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; background-color: #fff;
  background-image: conic-gradient(#e9e6ee 25%, #fff 0 50%, #e9e6ee 0 75%, #fff 0); background-size: 10px 10px;
}
.sm-intensity { justify-content: center; margin-top: 8px; }
.sm-intensity input { width: 160px; }

@media (max-width: 480px) {
  .sm-actions { gap: 6px; }
  .sm-actions .sm-btn:not(.round) { padding: 8px 10px; font-size: 12px; }   /* the action row fits in fewer lines on phones */
}
@media (max-width: 380px) {
  .sm-tool { font-size: 12px; }
  .sm-opt input[type=range] { width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-busy-ring { animation-duration: 1.6s; }   /* still turns: it is the "I am working" signal */
}

/* ── step 2: Draw tab — the picture and the drawing layer are stacked at the same size ── */
#wSmDrawWrap {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 260px; padding: 14px;
  border: 3px solid #2c2c2c; border-radius: 12px; box-sizing: border-box; margin-bottom: 14px;
  background-color: #fff;
  background-image: conic-gradient(#e9e6ee 25%, #fff 0 50%, #e9e6ee 0 75%, #fff 0);
  background-size: 20px 20px;
}
#wSmDrawStack { position: relative; line-height: 0; max-width: 100%; }
#wSmDrawStack canvas { display: block; max-width: 100%; max-height: min(52vh, 440px); width: auto; height: auto; }
#wSmDrawCanvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: none; cursor: crosshair; }
.sm-draw-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 12px 0 8px; }
#wSmDrawColor { width: 34px; height: 34px; border: 2px solid #2c2c2c; border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
#wSmPanelDraw .sm-opt input[type=range] { width: 110px; }

/* step 2: "Add to my stickers" */
.sm-save-btn { background: #fff; color: #2c2c2c; border: 3px solid #2c2c2c; }
.sm-save-btn:hover { background: #fff9e0; }
.sm-save-note { margin: 8px 0 0; text-align: center; font: 700 12px 'Nunito', sans-serif; color: #888; }


/* top action buttons: ONE row on wide screens (computers, tablets); stacked by priority on phones */
.sm-actions-group { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.sm-o1 { order: 1; } .sm-o2 { order: 2; } .sm-o3 { order: 3; } .sm-o4 { order: 4; }
@media (min-width: 561px) {
  .sm-actions-group .sm-actions { display: contents; }
}
@media (max-width: 560px) {
  .sm-actions-group { flex-direction: column; align-items: center; gap: 8px; }
  .sm-actions-group.sm-fresh #wSmSmooth { display: none; }   /* nothing cut yet: nothing to smooth */
}