/* Reuse Studio panels, fields, swatches, buttons and responsive grid. */
div:has(> [data-product-tab="name-clicker"]) { flex-wrap: wrap; justify-content: center; max-width: 760px !important; }
div:has(> [data-product-tab="name-clicker"]) > [data-product-tab] { flex: 0 0 auto !important; padding: 10px 18px; white-space: nowrap; }
#nameClickerPanel[hidden], #nameClickerShop[hidden], #nameClickerDesignResult[hidden] { display: none; }
#nameClickerPanel [hidden] { display: none; }
#nameClickerPanel .panel, #nameClickerPanel .preview-panel { min-width: 0; }
.name-clicker-help { color: var(--ink-soft); font-size: 13px; line-height: 1.6; margin: 8px 0 0; }
.name-clicker-size { margin: 0; font-size: 20px; font-weight: 600; }
.name-clicker-dimensions { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 14px; }
#nameClickerLoopStatus { margin: 0; }
#nameClickerPanel .config-card .name-clicker-dimensions { margin-top: 10px; }
/* Clicker จากรูป's step 7 pattern: the position label is a regular field label, one field gap below. */
#nameClickerLoopControls { margin-top: 24px; }
#nameClickerLoopStatus:not(:empty) { margin-top: 10px; }
#nameClickerStatus:empty, #nameClickerLoopStatus:empty { display: none; }
/* The preview toggle is Clicker จากรูป's own control, reused as-is. */
#nameClickerPanel .preview-title { align-items: center; gap: 10px; }
#nameClickerPanel .preview-title .clicker-preview-mode-toggle { margin-left: auto; }
.name-clicker-status { min-height: 1.6em; color: var(--ink-soft); line-height: 1.6; }
.name-clicker-stage { padding: 0; position: relative; display: block; flex: none; min-height: 0; }
/* The shared 3D preview backdrop (style.css --preview-3d-bg) instead of the
   cream-to-white stage, so white/cream parts don't dissolve into it. */
#nameClickerPanel .name-clicker-stage { background: var(--preview-3d-bg); }
#nameClickerPanel .preview-panel { align-self: start; }
#nameClickerViewer { width: 100%; height: 460px; }
#nameClickerViewer canvas { display: block; touch-action: none; }
.name-clicker-preview-message { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; color: var(--ink-soft); pointer-events: none; }
.name-clicker-preview-message:empty { display: none; }
#nameClickerPanel button:disabled { cursor: default; opacity: .5; }
#nameClickerInput[aria-invalid="true"] { border-color: #b45c47; }
.name-clicker-load, .name-clicker-exports { display: flex; gap: 8px; flex-wrap: wrap; }
.name-clicker-load input { flex: 1; min-width: 0; }
.name-clicker-load button, .name-clicker-exports button { padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--yellow); color: var(--ink); font: inherit; cursor: pointer; }
.name-clicker-exports { margin-top: 12px; }
#nameClickerShop { margin-top: 24px; }
/* Sound on/off — Name Clicker and Clicker จากรูป (one shared preference);
   matches the existing scale-toggle button's plain pill look (style.css)
   without touching that shared rule. */
.name-clicker-sound-toggle {
  flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--cream-deep); border-radius: 9px;
  cursor: pointer; background: white; color: inherit; font-size: 0.95em; line-height: 1;
}
.name-clicker-sound-toggle[aria-pressed="false"] { background: var(--cream-deep); opacity: .75; }

/* =====================================================================
   Dimension overlay restyle — Name Clicker's design, shared.
   Reuses the shared clicker/dimension-overlay.js exactly as every other
   product does (same box math, same show/hide state, same units); only
   the visual treatment of the "name-dim-h" (width) and "name-dim-v"
   (height) elements it now tags is changed here. Name Clicker's design is
   the reference: Name Keychain, Photo Keychain and Clicker จากรูป draw the
   same overlay (clicker/dimension-overlay.js) and share these same rules. Selectors
   are kept at higher specificity than style.css's shared !important rules
   (2 classes + the panel-scoping ID) so this wins regardless of load order.
   ===================================================================== */
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) { --nc-dim-h: #0d9488; --nc-dim-h-soft: #e3f5f2; --nc-dim-h-ink: #0f6f64;
  --nc-dim-v: #f0752e; --nc-dim-v-soft: #fdece0; --nc-dim-v-ink: #b2530f; }

/* Extension ticks (edge of the model down/up to the measurement line) are
   not drawn: with the line they formed a right-angle bracket at each end.
   The hollow endpoint circles below mark the measured edges instead. */
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-line:not(.name-dim-measure) { display: none !important; }

/* The measurement line: a solid hairline (1px, drawn by the shared module),
   softened so it reads as an annotation rather than part of the product.
   Both axes share one treatment; only the accent colour tells them apart. */
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-line.name-dim-measure { opacity: .75 !important; }
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-line.name-dim-h.name-dim-measure { background: var(--nc-dim-h) !important; }
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-line.name-dim-v.name-dim-measure { background: var(--nc-dim-v) !important; }

/* Endpoint markers: a small hollow circle instead of the shared arrowhead
   triangle. Anchored on the exact same point the arrowhead's tip already
   used to sit on (the box's leading edge for its direction), so the marker
   still lines up with the true measured edge without touching the shared
   position math. */
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-arrow.name-dim-measure { background: none !important; clip-path: none !important; }
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-arrow.name-dim-measure::after {
  content: ""; position: absolute; box-sizing: border-box; width: 6px; height: 6px; border-radius: 50%; background: #fff !important;
}
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-arrow.name-dim-h.name-dim-measure::after { border: 1px solid var(--nc-dim-h) !important; }
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-arrow.name-dim-v.name-dim-measure::after { border: 1px solid var(--nc-dim-v) !important; }
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-arrow-left.name-dim-measure::after { left: -3px; top: calc(50% + .5px); transform: translate(0, -50%); }
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-arrow-right.name-dim-measure::after { right: -3px; top: calc(50% + .5px); transform: translate(0, -50%); }
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-arrow-up.name-dim-measure::after { top: -3px; left: calc(50% + .5px); transform: translate(-50%, 0); }
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-arrow-down.name-dim-measure::after { bottom: -3px; left: calc(50% + .5px); transform: translate(-50%, 0); }

/* Compact value pill, centred on its line (the vertical one runs along it):
   white so it stays legible over any colour behind it, with a thin accent
   border and no shadow, so it stays lighter than the product. */
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-label.name-dim-h {
  border: 1px solid var(--nc-dim-h) !important;
  color: var(--nc-dim-h-ink) !important; -webkit-text-fill-color: var(--nc-dim-h-ink) !important;
}
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-label.name-dim-v {
  border: 1px solid var(--nc-dim-v) !important;
  color: var(--nc-dim-v-ink) !important; -webkit-text-fill-color: var(--nc-dim-v-ink) !important;
}
:is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-label {
  background: rgba(255, 255, 255, .94) !important; border-radius: 999px !important; padding: 1px 8px !important;
  font: 700 11px/1.55 var(--font-body, Arial, sans-serif) !important; transform-origin: 50% 50%;
}

/* Send-time keyring check: the shared dialog (perler.css .pz-help-dialog)
   with the page's own two order buttons side by side. */
.name-clicker-loop-confirm-actions { display: flex; gap: 10px; }
.name-clicker-loop-confirm-actions .order-button { flex: 1; margin: 0; }

/* =====================================================================
   Color disclaimer -> intentional info callout, shared by every product
   tab (Name Keychain, Name Clicker, Photo Keychain, Clicker จากรูป): the
   same approved text/data-i18n key (.ws-color-note) in one small bordered
   card. No wording changes.
   ===================================================================== */
.name-clicker-color-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 10px 0 18px; padding: 10px 12px;
  background: #eef8f7; border: 1px solid #9cd3cb; border-radius: 12px;
}
.name-clicker-color-note-icon { flex: none; width: 17px; height: 17px; margin-top: 1px; color: #0d7d72; }
.name-clicker-color-note .ws-color-note { margin: 0; text-align: left; color: #1f5f58; font-size: 13px; line-height: 1.55; }

@media (max-width: 600px) {
  #nameClickerPanel .preview-title .clicker-preview-mode-toggle { margin-left: 0; width: 100%; }
  div:has(> [data-product-tab="name-clicker"]) > [data-product-tab] { padding: 8px 12px; font-size: 14px; }
  #nameClickerViewer { height: 340px; }
  #nameClickerPanel .preview-title { flex-wrap: wrap; gap: 8px; }
  :is(#nameClickerDimensionOverlay, #nameDimensionOverlay, #photoKeychainDimensionOverlay, #photoKeycapDimensionOverlay, #textKeycapDimensionOverlay, #clickerDimensionOverlay, .preview-dim-overlay) .name-dim-label { font-size: 10.5px !important; padding: 0 7px !important; }
}