/*
 * WORDSTORE v325 — Design Studio controls inspired by modern 21st.dev patterns.
 * CSS-only enhancement: existing PHP markup and JavaScript behavior stay unchanged.
 */
:root {
  --ws-designer-purple: #8224e3;
  --ws-designer-purple-dark: #6419b7;
  --ws-designer-cyan: #79e7ff;
  --ws-designer-ink: #0b0b10;
  --ws-designer-panel: #15151d;
  --ws-designer-line: rgba(255, 255, 255, .12);
}

.designer-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 4%, rgba(130, 36, 227, .13), transparent 31rem),
    radial-gradient(circle at 90% 30%, rgba(121, 231, 255, .07), transparent 26rem),
    #0a0a0f;
}
.designer-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(121, 231, 255, .8), var(--ws-designer-purple), transparent);
  opacity: .9;
}
.designer-section .container { position: relative; z-index: 1; }
.designer-section-intro { position: relative; }
.designer-section-intro::after {
  content: '';
  display: block;
  width: 76px;
  height: 4px;
  margin-top: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ws-designer-purple), var(--ws-designer-cyan));
  box-shadow: 0 0 22px rgba(130, 36, 227, .45);
}
.designer-section-intro .section-kicker { color: #b88aff; letter-spacing: .18em; }
.designer-section-intro .section-title { letter-spacing: -.04em; }

.custom-designer {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)), #101017;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .12);
  isolation: isolate;
}
.custom-designer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(121, 231, 255, .08), transparent 25%, transparent 70%, rgba(130, 36, 227, .10));
  z-index: -1;
}

.custom-designer .designer-toolbar {
  position: relative;
  min-height: 76px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ws-designer-line);
  background: rgba(10, 10, 15, .82);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.custom-designer .designer-toolbar::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--ws-designer-purple), transparent 70%);
  opacity: .8;
}
.custom-designer .designer-product-select { color: #aaa6b8; font-size: 9px; letter-spacing: .16em; }
.custom-designer .designer-product-select select,
.custom-designer .designer-setting input,
.custom-designer .designer-setting select,
.custom-designer .designer-setting textarea,
.custom-designer [data-designer-font] {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(5, 5, 9, .78);
  color: #f8f7fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.custom-designer .designer-product-select select { min-height: 44px; padding-inline: 14px; }
.custom-designer .designer-product-select select:hover,
.custom-designer .designer-setting input:hover,
.custom-designer .designer-setting select:hover,
.custom-designer .designer-setting textarea:hover,
.custom-designer [data-designer-font]:hover { border-color: rgba(121, 231, 255, .48); }
.custom-designer .designer-product-select select:focus,
.custom-designer .designer-setting input:focus,
.custom-designer .designer-setting select:focus,
.custom-designer .designer-setting textarea:focus,
.custom-designer [data-designer-font]:focus {
  border-color: var(--ws-designer-purple);
  outline: none;
  background: rgba(13, 8, 23, .92);
  box-shadow: 0 0 0 3px rgba(130, 36, 227, .18), 0 0 22px rgba(130, 36, 227, .14);
}

.custom-designer .designer-history-button,
.custom-designer .designer-stage .designer-side,
.custom-designer .designer-toolbar .designer-side,
.custom-designer .designer-tool-action,
.custom-designer .designer-tool-panel-toggle,
.custom-designer .designer-submit,
.custom-designer .designer-apply-text,
.custom-designer .sticker-choice {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
  color: #f5f2fb;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.custom-designer .designer-history-button::before,
.custom-designer .designer-stage .designer-side::before,
.custom-designer .designer-tool-action::before,
.custom-designer .designer-tool-panel-toggle::before,
.custom-designer .designer-submit::before,
.custom-designer .designer-apply-text::before,
.custom-designer .sticker-choice::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, .22) 48%, transparent 67%);
  transform: translateX(-125%);
  transition: transform .6s ease;
}
.custom-designer .designer-history-button:hover:not(:disabled),
.custom-designer .designer-stage .designer-side:hover,
.custom-designer .designer-stage .designer-side:focus-visible,
.custom-designer .designer-tool-action:hover,
.custom-designer .designer-tool-panel-toggle:hover,
.custom-designer .designer-apply-text:hover,
.custom-designer .sticker-choice:hover,
.custom-designer .designer-history-button:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(121, 231, 255, .72);
  background: linear-gradient(135deg, rgba(121, 231, 255, .15), rgba(130, 36, 227, .14));
  color: #fff;
  outline: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .28), 0 0 0 3px rgba(121, 231, 255, .08);
}
.custom-designer .designer-history-button:hover:not(:disabled)::before,
.custom-designer .designer-stage .designer-side:hover::before,
.custom-designer .designer-tool-action:hover::before,
.custom-designer .designer-tool-panel-toggle:hover::before,
.custom-designer .designer-apply-text:hover::before,
.custom-designer .sticker-choice:hover::before { transform: translateX(125%); }
.custom-designer .designer-history-button:active:not(:disabled),
.custom-designer .designer-stage .designer-side:active,
.custom-designer .designer-tool-action:active,
.custom-designer .designer-tool-panel-toggle:active,
.custom-designer .designer-submit:active,
.custom-designer .designer-apply-text:active,
.custom-designer .sticker-choice:active { transform: translateY(0) scale(.98); }
.custom-designer .designer-history-button:disabled { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }

.custom-designer .designer-workspace { background: #111119; }
.custom-designer .designer-tools,
.custom-designer .designer-settings {
  background: linear-gradient(180deg, rgba(22, 22, 31, .96), rgba(12, 12, 18, .96));
  border-color: var(--ws-designer-line);
}
.custom-designer .designer-tools { gap: 11px; padding: 18px 12px; }
.custom-designer .designer-tool-rail-title,
.custom-designer .designer-settings .designer-setting > label,
.custom-designer .designer-settings .designer-font-label,
.custom-designer .designer-layers-heading {
  color: #b6aec6;
  letter-spacing: .14em;
}
.custom-designer .designer-tool-action,
.custom-designer .designer-tool-panel-toggle { min-height: 54px; padding: 10px 11px; }
.custom-designer .designer-tool-panel-toggle.is-active {
  border-color: rgba(130, 36, 227, .86);
  background: linear-gradient(135deg, rgba(130, 36, 227, .38), rgba(130, 36, 227, .12));
  color: #fff;
  box-shadow: 0 10px 26px rgba(130, 36, 227, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.custom-designer .designer-tool-panel,
.custom-designer .designer-layers-panel {
  border-color: rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.custom-designer .designer-tool-panel { border-top: 1px solid rgba(255, 255, 255, .12); }
.custom-designer .designer-color-choice > .designer-color { border-radius: 10px; }
.custom-designer .designer-color-choice > .designer-color.is-selected { outline: 2px solid var(--ws-designer-cyan); outline-offset: 2px; }
.custom-designer .designer-layer-row { border-radius: 10px; }
.custom-designer .designer-layers-heading { background: rgba(130, 36, 227, .12); }

.custom-designer .designer-stage-wrap { background: #1a1a23; }
.custom-designer .designer-stage {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .07), transparent 24rem),
    linear-gradient(145deg, #242430, #15151d);
}
.custom-designer .designer-stage .designer-stage-sides { gap: 8px; }
.custom-designer .designer-stage .designer-side { min-height: 38px; }
.custom-designer .designer-stage .designer-side.is-active {
  border-color: var(--ws-designer-purple);
  background: linear-gradient(135deg, var(--ws-designer-purple), var(--ws-designer-purple-dark));
  color: #fff;
  box-shadow: 0 8px 22px rgba(130, 36, 227, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.custom-designer .designer-stage .designer-side.is-active:hover { background: linear-gradient(135deg, #923cf0, #701dc9); }
.custom-designer .designer-stage-hint { color: #aaa4b6; }

.custom-designer .designer-settings { gap: 16px; padding: 22px; }
.custom-designer .designer-setting { gap: 8px; }
.custom-designer .designer-setting span,
.custom-designer .designer-setting small,
.custom-designer .sticker-total-row small { color: #9892a4; }
.custom-designer .designer-apply-text {
  min-height: 40px;
  border-color: rgba(130, 36, 227, .65);
  background: rgba(130, 36, 227, .18);
  color: #e8d9ff;
  font-weight: 800;
}
.custom-designer .designer-apply-text:hover { border-color: var(--ws-designer-purple); background: rgba(130, 36, 227, .34); }
.custom-designer .designer-submit {
  min-height: 54px;
  margin-top: 6px;
  border-color: var(--ws-designer-purple);
  border-radius: 14px;
  background: linear-gradient(135deg, #923cf0 0%, var(--ws-designer-purple) 48%, #681bbd 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(130, 36, 227, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
  letter-spacing: .10em;
}
.custom-designer .designer-submit:hover {
  border-color: #a965ff;
  background: linear-gradient(135deg, #a65fff, #8224e3 55%, #7121ce);
  color: #fff;
  box-shadow: 0 18px 36px rgba(130, 36, 227, .38), inset 0 1px 0 rgba(255, 255, 255, .34);
}
.custom-designer .sticker-choice.is-selected {
  border-color: var(--ws-designer-purple);
  background: linear-gradient(135deg, var(--ws-designer-purple), var(--ws-designer-purple-dark));
  color: #fff;
  box-shadow: 0 8px 18px rgba(130, 36, 227, .25);
}
.custom-designer .sticker-total-row { border-top-color: rgba(255, 255, 255, .14); }
.custom-designer .sticker-shipping-note { color: var(--ws-designer-cyan); }

@media (max-width: 980px) {
  .custom-designer { border-radius: 20px; }
  .custom-designer .designer-settings { padding: 18px; }
}
@media (max-width: 720px) {
  .custom-designer { border-radius: 16px; }
  .custom-designer .designer-toolbar { padding: 13px; }
  .custom-designer .designer-tools { padding: 13px; }
  .custom-designer .designer-settings { padding: 15px; }
  .custom-designer .designer-stage .designer-stage-sides .designer-side { border-radius: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .custom-designer .designer-history-button,
  .custom-designer .designer-stage .designer-side,
  .custom-designer .designer-tool-action,
  .custom-designer .designer-tool-panel-toggle,
  .custom-designer .designer-submit,
  .custom-designer .designer-apply-text,
  .custom-designer .sticker-choice,
  .custom-designer .designer-history-button::before,
  .custom-designer .designer-stage .designer-side::before,
  .custom-designer .designer-tool-action::before,
  .custom-designer .designer-tool-panel-toggle::before,
  .custom-designer .designer-submit::before,
  .custom-designer .designer-apply-text::before,
  .custom-designer .sticker-choice::before { transition: none; }
}

/* v326 — direct, unambiguous actions on the selected layer row. */
.designer-tools.customer-design-tools .designer-layer-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.designer-tools.customer-design-tools .designer-layer-actions { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 25px; }
.designer-tools.customer-design-tools .designer-layer-action { width: 25px; height: 25px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.78); font: 700 19px/1 Arial, sans-serif; cursor: pointer; opacity: .82; }
.designer-tools.customer-design-tools .designer-layer-action:hover,
.designer-tools.customer-design-tools .designer-layer-action:focus-visible { border-color: rgba(255,255,255,.85); background: #8224e3; color: #fff; opacity: 1; outline: none; transform: translateY(-1px); }
@media (max-width: 720px) { .designer-tools.customer-design-tools .designer-layer-row { grid-template-columns: 34px minmax(0,1fr) auto; } .designer-tools.customer-design-tools .designer-layer-action { width: 24px; height: 24px; } }


/* v327 — full element controls: resize handles, rotation, direct drag and keyboard-friendly selection. */
.customer-mockup-art .designer-transform-box {
  position: absolute;
  z-index: 60;
  display: block;
  min-width: 18px;
  min-height: 18px;
  border: 1px solid rgba(130,36,227,.95);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 18px rgba(130,36,227,.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-sizing: border-box;
}
.customer-mockup-art .designer-transform-box[hidden] { display: none; }
.customer-mockup-art .designer-transform-handle,
.customer-mockup-art .designer-transform-rotate {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 3px;
  background: #8224e3;
  box-shadow: 0 1px 5px rgba(0,0,0,.55);
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
}
.customer-mockup-art .designer-transform-handle-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.customer-mockup-art .designer-transform-handle-n { left: calc(50% - 5px); top: -6px; cursor: ns-resize; }
.customer-mockup-art .designer-transform-handle-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.customer-mockup-art .designer-transform-handle-e { right: -6px; top: calc(50% - 5px); cursor: ew-resize; }
.customer-mockup-art .designer-transform-handle-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.customer-mockup-art .designer-transform-handle-s { left: calc(50% - 5px); bottom: -6px; cursor: ns-resize; }
.customer-mockup-art .designer-transform-handle-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.customer-mockup-art .designer-transform-handle-w { left: -6px; top: calc(50% - 5px); cursor: ew-resize; }
.customer-mockup-art .designer-transform-rotate {
  left: calc(50% - 7px);
  top: -34px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font: 800 13px/12px Arial, sans-serif;
  cursor: grab;
}
.customer-mockup-art .designer-transform-rotate:active { cursor: grabbing; }
.customer-mockup-art .designer-transform-box + .designer-selection-tools { z-index: 61; }
.customer-mockup-art .designer-stage.is-transforming,
.customer-mockup-art .designer-stage.is-transforming * { cursor: crosshair !important; }
.customer-mockup-art .designer-print-area > [data-designer-text-preview],
.customer-mockup-art .designer-print-area > [data-designer-text-copy],
.customer-mockup-art .designer-print-area [data-designer-image-preview] { transform-origin: center center; }
@media (max-width: 720px) {
  .customer-mockup-art .designer-transform-handle { width: 13px; height: 13px; }
  .customer-mockup-art .designer-transform-handle-nw { left: -8px; top: -8px; }
  .customer-mockup-art .designer-transform-handle-n { top: -8px; }
  .customer-mockup-art .designer-transform-handle-ne { right: -8px; top: -8px; }
  .customer-mockup-art .designer-transform-handle-e { right: -8px; }
  .customer-mockup-art .designer-transform-handle-se { right: -8px; bottom: -8px; }
  .customer-mockup-art .designer-transform-handle-s { bottom: -8px; }
  .customer-mockup-art .designer-transform-handle-sw { left: -8px; bottom: -8px; }
  .customer-mockup-art .designer-transform-handle-w { left: -8px; }
}