/* ---------------------------------------------------------------------------
 * Uros Invitation Editor — customer editor
 *
 * Layout is a single flex column. Source order is mobile order; on ≥900px the
 * action bar moves up under the header to read like a desktop toolbar.
 *
 *   mobile          desktop
 *   ------          -------
 *   header          header
 *   stage           toolbar (action bar)
 *   action bar      stage
 *   cart bar        cart bar
 *
 * Every interactive control is at least 44×44 CSS px and every text input is
 * 16px so mobile Safari never zooms the page on focus.
 * ------------------------------------------------------------------------- */

.uie-direct-editor {
  --uie-ink: #16161a;
  --uie-muted: #6b6b74;
  --uie-line: #e3e3e8;
  --uie-line-strong: #cfcfd6;
  --uie-surface: #ffffff;
  --uie-surface-2: #f6f6f8;
  --uie-stage: #ececed;
  --uie-danger: #c0332f;
  --uie-tap: 44px;
  --uie-sheet-height: 0px;
  /* Tallest row the action bar holds: the align group — a 44px button,
     3px padding and a 1px border top and bottom — plus the row's own 1px/3px
     padding. The bar is sized from this in both states (hint / tools), so
     selecting a text never changes its height and never moves the artwork. */
  --uie-bar-row: calc(var(--uie-tap) + 12px);

  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  background: var(--uie-surface);
  color: var(--uie-ink);
  font-family: var(--uie-interface-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.uie-direct-editor *,
.uie-direct-editor *::before,
.uie-direct-editor *::after {
  box-sizing: border-box;
}

.uie-direct-editor button {
  margin: 0;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.uie-direct-editor :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.22);
}

/* ==========================================================================
   Header
   ========================================================================== */

.uie-editor-head {
  order: 1;
  position: relative;
  z-index: 6;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--uie-safe-top, 0px)) max(12px, var(--uie-safe-right, 0px)) 10px max(12px, var(--uie-safe-left, 0px));
  border-bottom: 1px solid var(--uie-line);
  background: var(--uie-surface);
}

.uie-editor-head-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.uie-editor-head-copy h2 {
  margin: 0;
  padding: 0;
  color: var(--uie-ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-transform: none;
}

.uie-editor-head-copy p {
  display: none;
  margin: 3px 0 0;
  padding: 0;
  color: var(--uie-muted);
  font-size: 12px;
  line-height: 1.35;
}

.uie-head-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.uie-history-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--uie-line);
  border-radius: 12px;
  background: var(--uie-surface-2);
}

.uie-icon-btn {
  display: inline-flex;
  width: var(--uie-tap);
  height: var(--uie-tap);
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4a4a52;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}

.uie-icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uie-icon-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: var(--uie-ink);
}

.uie-icon-btn:active:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
}

.uie-icon-btn:disabled {
  cursor: default;
  opacity: 0.28;
}

.uie-modal-close {
  display: inline-flex;
  width: var(--uie-tap);
  height: var(--uie-tap);
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--uie-line);
  border-radius: 12px;
  background: var(--uie-surface);
  color: var(--uie-ink);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.uie-modal-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.uie-modal-close:hover {
  border-color: var(--uie-line-strong);
  background: var(--uie-surface-2);
}

/* Help: the one header control with a word on it — customers who are stuck
   look for "Pomoć", not for an icon. */
.uie-help-btn {
  display: inline-flex;
  min-width: var(--uie-tap);
  height: var(--uie-tap);
  padding: 0 13px 0 11px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--uie-line-strong);
  border-radius: 12px;
  background: var(--uie-surface);
  color: var(--uie-ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease;
}

.uie-help-btn svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uie-help-btn:hover,
.uie-help-btn[aria-expanded="true"] {
  border-color: var(--uie-ink);
  background: var(--uie-surface-2);
}

/* Shown once, when nothing has changed for a while (frontend-editor.js). */
.uie-help-btn.is-nudging {
  border-color: var(--uie-ink);
  animation: uie-help-nudge 1.6s ease-in-out 3;
}

@keyframes uie-help-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 23, 23, 0.28); }
  50% { box-shadow: 0 0 0 7px rgba(23, 23, 23, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .uie-help-btn.is-nudging {
    animation: none;
  }
}

/* The narrowest phones keep the 44px target and drop the word; the
   accessible name stays on aria-label. (Phones hide the title, so up to
   340px there is room for the word.) */
@media (max-width: 340px) {
  .uie-help-btn {
    padding: 0;
  }

  .uie-help-btn-label {
    display: none;
  }
}

.uie-help-intro {
  margin: 0 0 12px;
  padding: 0;
  color: var(--uie-ink);
  font-size: 14px;
  line-height: 1.5;
}

.uie-help-links {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uie-help-links li {
  margin: 0;
  padding: 0;
}

.uie-help-link {
  display: flex;
  min-height: 56px;
  padding: 8px 12px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--uie-line);
  border-radius: 12px;
  background: var(--uie-surface);
  color: var(--uie-ink);
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

.uie-help-link:hover,
.uie-help-link:focus-visible {
  border-color: var(--uie-line-strong);
  background: var(--uie-surface-2);
  color: var(--uie-ink);
}

.uie-help-link-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--uie-surface-2);
  color: var(--uie-ink);
}

.uie-help-link.is-whatsapp .uie-help-link-icon {
  background: #e3f5ea;
  color: #127a4a;
}

.uie-help-link.is-viber .uie-help-link-icon {
  background: #efeafd;
  color: #5b45c9;
}

.uie-help-link-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uie-help-link-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}

.uie-help-link-copy strong {
  font-size: 14px;
  font-weight: 680;
  line-height: 1.2;
}

.uie-help-link-copy small {
  overflow: hidden;
  color: var(--uie-muted);
  font-size: 12.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uie-help-link-arrow {
  flex: 0 0 auto;
  color: var(--uie-muted);
  font-size: 22px;
  line-height: 1;
}

/* ==========================================================================
   Stage
   ========================================================================== */

.uie-editor-stage {
  order: 2;
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--uie-stage);
}

.uie-canvas-area {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  /* Contains the canvas before JS has fitted it to the stage. */
  overflow: hidden;
  padding: 10px max(10px, var(--uie-safe-left, 0px)) 10px max(10px, var(--uie-safe-right, 0px));
  align-items: center;
  justify-content: center;
}

/* While a bottom sheet is open the artwork keeps clear of it, so customers see
   their text change live while they type or pick a font. */
.uie-direct-editor.is-sheet-open .uie-canvas-area {
  padding-bottom: calc(10px + var(--uie-sheet-height, 0px));
}

/* The wrap is the stage viewport: JS sizes it, and the canvas fills it exactly.
   The artwork itself is drawn through Fabric's viewport transform, so the paper
   and watermark layers are positioned to match it. */
.uie-canvas-wrap {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: 6px;
  /* The canvas owns every gesture inside it — no page scroll, no pinch zoom. */
  touch-action: none;
}

.uie-canvas-wrap .canvas-container {
  position: absolute !important;
  left: 0;
  top: 0;
  z-index: 2;
  touch-action: none;
}

.uie-canvas-wrap canvas {
  display: block;
  max-width: none;
  touch-action: none;
}

/* The sheet of paper under the design. */
.uie-canvas-paper {
  position: absolute;
  z-index: 1;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  transition: opacity 160ms ease;
}

.uie-watermark {
  position: absolute;
  z-index: 3;
  display: grid;
  overflow: hidden;
  padding: 4%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  border-radius: 3px;
  pointer-events: none;
}

/* The words scale with the artwork, not the window: a fixed size piled up
   into one blot on a small preview (a phone on its side). */
@supports (container-type: size) {
  .uie-watermark {
    container-type: size;
  }
}

.uie-watermark span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(8px, 1.5vw, 15px);
  font-size: clamp(6px, 3cqw, 15px);
  font-weight: 850;
  letter-spacing: 0.16em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(26, 18, 31, 0.4);
  transform: rotate(-28deg);
  white-space: nowrap;
}

.uie-canvas-hint {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 5;
  display: flex;
  max-width: calc(100% - 28px);
  padding: 8px 14px;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(22, 22, 26, 0.86);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 220ms ease, transform 220ms ease;
}

.uie-canvas-hint.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}

/* ==========================================================================
   Zoom control
   ========================================================================== */

.uie-zoom-control {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(12, 12, 16, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Zoom, alignment and the sheet's "done" button used to be 38px — under the
   44px the rest of the editor keeps. They are relaxed again further down for
   fine pointers, so the desktop layout is unchanged. */
.uie-zoom-control button {
  display: inline-flex;
  min-width: var(--uie-tap);
  height: var(--uie-tap);
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--uie-ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: background 150ms ease, opacity 150ms ease;
}

.uie-zoom-control button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
}

.uie-zoom-control button:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
}

.uie-zoom-control button:disabled {
  cursor: default;
  opacity: 0.3;
}

#uie_frontend_zoom_reset {
  min-width: 52px;
}

/* Only offer "fit to screen" once there is something to reset. */
.uie-zoom-control:not(.is-zoomed) #uie_frontend_zoom_reset {
  color: var(--uie-muted);
}

/* Touch: pinch is the zoom, like in Canva. The control only appears once
   the invitation is zoomed — to show how far and to fit it back — instead
   of covering the bottom corner of the artwork all the time. */
@media (pointer: coarse) {
  .uie-zoom-control {
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .uie-zoom-control:not(.is-zoomed) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
  }
}

.uie-stage-loader {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--uie-stage);
  color: var(--uie-muted);
  font-size: 13px;
  font-weight: 600;
  transition: opacity 220ms ease;
}

.uie-stage-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.uie-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(0, 0, 0, 0.14);
  border-top-color: var(--uie-ink);
  border-radius: 50%;
  animation: uie-spin 750ms linear infinite;
}

/* ==========================================================================
   Action bar (contextual tools)
   ========================================================================== */

.uie-actionbar {
  order: 3;
  position: relative;
  z-index: 5;
  display: flex;
  flex: 0 0 auto;
  /* A fixed height, not min-height: the hint and the tools row differ in
     height, and any change here resizes the stage and moves the artwork. */
  height: calc(var(--uie-bar-row) + 17px);
  padding: 8px max(10px, var(--uie-safe-left, 0px)) 8px max(10px, var(--uie-safe-right, 0px));
  align-items: center;
  border-top: 1px solid var(--uie-line);
  background: var(--uie-surface);
}

.uie-actionbar-idle {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--uie-muted);
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.35;
  text-align: center;
}

.uie-actionbar-idle span {
  display: inline-flex;
  flex: 0 0 auto;
}

.uie-actionbar-idle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.uie-actionbar-tools {
  display: flex;
  width: 100%;
  padding: 1px 2px 3px;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.uie-actionbar-tools::-webkit-scrollbar {
  display: none;
}

/* More tools past the edge: fade them out so the row reads as scrollable
   (JS sets the classes from the scroll position). */
.uie-actionbar-tools.has-more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

.uie-actionbar-tools.has-more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
}

.uie-actionbar-tools.has-more-left.has-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

.uie-tool {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: var(--uie-tap);
  min-height: var(--uie-tap);
  padding: 6px 12px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--uie-line-strong);
  border-radius: 12px;
  background: var(--uie-surface);
  color: var(--uie-ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.uie-tool:hover:not(:disabled) {
  border-color: #9d9da6;
  background: var(--uie-surface-2);
}

.uie-tool:active:not(:disabled) {
  background: #ebebee;
}

.uie-tool:disabled {
  cursor: default;
  opacity: 0.32;
}

.uie-tool.is-primary {
  border-color: var(--uie-ink);
  background: var(--uie-ink);
  color: #fff;
}

.uie-tool.is-primary:hover:not(:disabled) {
  background: #2c2c33;
}

.uie-tool.is-danger:hover:not(:disabled) {
  border-color: #edb9b6;
  background: #fdf3f2;
  color: var(--uie-danger);
}

.uie-tool-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.uie-tool-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uie-tool.is-font {
  max-width: 190px;
}

.uie-tool.is-font .uie-tool-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon-only tools on the narrowest screens keep the label for screen readers. */
@media (max-width: 400px) {
  .uie-tool:not(.is-primary):not(.is-font) .uie-tool-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.uie-tool-align {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--uie-line-strong);
  border-radius: 12px;
  background: var(--uie-surface);
}

.uie-tool-align button {
  display: inline-flex;
  width: var(--uie-tap);
  height: var(--uie-tap);
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #5a5a63;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.uie-tool-align button:hover {
  background: var(--uie-surface-2);
}

.uie-tool-align button.is-active {
  background: var(--uie-ink);
  color: #fff;
}

.uie-align-glyph {
  display: flex;
  width: 16px;
  flex-direction: column;
  gap: 3px;
}

.uie-align-glyph i {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.uie-align-glyph i:nth-child(2) {
  width: 10px;
}

.uie-align-glyph.is-center i:nth-child(2) {
  align-self: center;
}

.uie-align-glyph.is-right i:nth-child(2) {
  align-self: flex-end;
}

/* Phones: alignment is one button that cycles left → centre → right, as in
   Canva; the three-button group took a third of the row and pushed Dupliraj
   and Obriši off screen. The font name gets less room too. */
@media (max-width: 699px) {
  .uie-tool-align {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .uie-tool-align button:not(.is-active) {
    display: none;
  }

  .uie-tool-align button.is-active {
    border: 1px solid var(--uie-line-strong);
    border-radius: 12px;
    background: var(--uie-surface);
    color: var(--uie-ink);
  }

  /* Uredi tekst · Font · Poravnanje · Dupliraj · Obriši — all on screen at
     390px (measured: 118 + 96 + 3 × 44 + 4 × 4 + 4). */
  .uie-actionbar-tools {
    gap: 4px;
  }

  .uie-tool.is-font {
    max-width: 96px;
  }
}

/* The narrowest phones: the font button is "Aa" alone — the sheet it opens
   names the font — so the row still fits at 360px. */
@media (max-width: 380px) {
  .uie-tool.is-font {
    width: var(--uie-tap);
    padding: 0;
  }

  .uie-tool.is-font .uie-tool-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   Cart bar
   ========================================================================== */

.uie-cart-bar {
  order: 4;
  position: relative;
  z-index: 6;
  display: grid;
  flex: 0 0 auto;
  padding: 10px max(12px, var(--uie-safe-left, 0px)) calc(10px + var(--uie-safe-bottom, 0px)) max(12px, var(--uie-safe-right, 0px));
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 10px;
  border-top: 1px solid var(--uie-line);
  background: var(--uie-surface);
  box-shadow: 0 -6px 20px rgba(16, 16, 20, 0.05);
}

.uie-cart-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.uie-cart-info strong {
  color: var(--uie-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.uie-cart-info small {
  color: var(--uie-muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.uie-cart-info small.is-error {
  color: var(--uie-danger);
  font-weight: 600;
}

.uie-cart-info small.is-loading {
  color: var(--uie-ink);
}

.uie-note-btn {
  display: inline-flex;
  min-height: var(--uie-tap);
  padding: 8px 14px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--uie-line-strong);
  border-radius: 12px;
  background: var(--uie-surface);
  color: var(--uie-ink);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 620;
  white-space: nowrap;
  transition: border-color 150ms ease, background 150ms ease;
}

.uie-note-btn .uie-tool-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.uie-note-btn:hover {
  border-color: #9d9da6;
  background: var(--uie-surface-2);
}

.uie-note-btn.has-value {
  border-color: var(--uie-ink);
  background: var(--uie-surface-2);
}

/* Sačuvaj — same shape as Napomena; icon only on narrow phones. */
.uie-save-btn.is-loading {
  opacity: 0.6;
  cursor: progress;
}

.uie-save-btn.is-saved {
  border-color: #2e7256;
  background: #eef6f1;
  color: #1f5c43;
}

.uie-save-btn.is-saved .uie-tool-icon svg {
  fill: currentColor;
}

@media (max-width: 699px) {
  .uie-save-btn {
    width: var(--uie-tap);
    padding-right: 0;
    padding-left: 0;
  }

  .uie-save-label {
    display: none;
  }
}

.uie-save-intro {
  margin: 0 0 14px;
  color: var(--uie-muted);
  font-size: 14px;
  line-height: 1.55;
}

.uie-save-actions {
  display: grid;
  gap: 8px;
}

.uie-save-link {
  display: flex;
  min-height: 48px;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--uie-line-strong);
  border-radius: 12px;
  background: var(--uie-surface);
  color: var(--uie-ink);
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: none;
}

.uie-save-link.is-primary {
  border-color: var(--uie-cart-button-bg, #171717);
  background: var(--uie-cart-button-bg, #171717);
  color: var(--uie-cart-button-color, #fff);
}

.uie-save-link:focus-visible {
  outline: 2px solid var(--uie-ink);
  outline-offset: 2px;
}

.uie-add-design-to-cart {
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--uie-cart-button-bg, #171717);
  border-radius: 12px;
  background: var(--uie-cart-button-bg, #171717);
  color: var(--uie-cart-button-color, #fff);
  cursor: pointer;
  font-size: 15px;
  font-weight: 680;
  line-height: 1.2;
  transition: filter 160ms ease, opacity 160ms ease;
}

.uie-add-design-to-cart:hover:not(:disabled) {
  filter: brightness(0.9);
}

.uie-add-design-to-cart:active:not(:disabled) {
  filter: brightness(0.84);
}

.uie-add-design-to-cart:disabled {
  cursor: default;
  opacity: 0.68;
}

.uie-add-design-to-cart .uie-cta-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uie-cta-spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: uie-spin 700ms linear infinite;
}

.uie-add-design-to-cart.is-loading {
  cursor: progress;
}

.uie-add-design-to-cart.is-loading .uie-cta-spinner {
  display: inline-block;
}

.uie-add-design-to-cart.is-loading .uie-cta-icon,
.uie-add-design-to-cart.is-added .uie-cta-icon {
  display: none;
}

.uie-add-design-to-cart.is-added {
  background: #127a4a;
  border-color: #127a4a;
  color: #fff;
  opacity: 1;
}

.uie-cart-bar > .added_to_cart.wc-forward {
  display: none !important;
}

/* ==========================================================================
   Sheets (text, font, note)
   Bottom sheet on touch/small screens, anchored popover on desktop.
   ========================================================================== */

.uie-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.uie-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 20, 0.34);
  opacity: 0;
  transition: opacity 200ms ease;
}

.uie-sheet.is-open::before {
  opacity: 1;
}

/* Text, font and QR location: the invitation above the sheet IS the preview.
   No dimming, and taps go through to it — another text switches what is
   being edited, empty space closes the sheet (frontend-editor.js). */
#uie_frontend_text_sheet,
#uie_frontend_font_sheet,
#uie_frontend_location_sheet,
#uie_frontend_qr_color_sheet {
  pointer-events: none;
}

#uie_frontend_text_sheet::before,
#uie_frontend_font_sheet::before,
#uie_frontend_location_sheet::before,
#uie_frontend_qr_color_sheet::before {
  background: transparent;
}

#uie_frontend_text_sheet .uie-sheet-panel,
#uie_frontend_font_sheet .uie-sheet-panel,
#uie_frontend_location_sheet .uie-sheet-panel,
#uie_frontend_qr_color_sheet .uie-sheet-panel {
  pointer-events: auto;
}

/* QR colour: the current colour on the tool button, swatches in the sheet. */
.uie-color-dot {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #211e1b;
  box-shadow: 0 0 0 1px var(--uie-line-strong);
}

.uie-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.uie-swatch {
  position: relative;
  width: var(--uie-tap);
  height: var(--uie-tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.uie-swatch span {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.uie-swatch[aria-checked="true"] {
  box-shadow: 0 0 0 2px var(--uie-ink);
}

.uie-color-custom {
  display: inline-flex;
  min-height: var(--uie-tap);
  padding: 4px 14px 4px 4px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--uie-line-strong);
  border-radius: 12px;
  color: var(--uie-ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 620;
}

.uie-color-custom input[type="color"] {
  width: 36px;
  height: 36px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

.uie-sheet-note.is-error {
  color: var(--uie-danger);
  font-weight: 600;
}

.uie-sheet-panel {
  position: relative;
  display: flex;
  width: 100%;
  max-height: calc(100% - 24px);
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: var(--uie-surface);
  box-shadow: 0 -14px 40px rgba(12, 12, 16, 0.24);
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uie-sheet.is-open .uie-sheet-panel {
  transform: translateY(0);
}

/* The font list is the one sheet worth making tall — customers browse it. */
@media (max-width: 899px) {
  #uie_frontend_font_sheet .uie-sheet-panel {
    height: min(78%, 640px);
    max-height: 78%;
  }

  #uie_frontend_note_sheet .uie-sheet-panel {
    max-height: min(70%, 420px);
  }
}

.uie-sheet-head {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  padding: 14px 14px 10px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--uie-line);
}

.uie-sheet-grip {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--uie-line-strong);
  transform: translateX(-50%);
}

.uie-sheet-head h3 {
  margin: 0;
  padding: 0;
  color: var(--uie-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 680;
  line-height: 1.25;
  text-transform: none;
}

.uie-sheet-done {
  display: inline-flex;
  min-height: var(--uie-tap);
  padding: 8px 16px;
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--uie-ink);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.uie-sheet-search {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-bottom: 1px solid var(--uie-line);
  background: var(--uie-surface-2);
}

.uie-sheet-body {
  flex: 1 1 auto;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.uie-sheet-body.is-list {
  padding: 8px;
}

.uie-sheet-note {
  margin: 10px 0 0;
  padding: 0;
  color: var(--uie-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* 16px inputs — anything smaller makes iOS Safari zoom the whole page. */
.uie-sheet textarea,
.uie-sheet input[type="search"],
.uie-sheet input[type="text"] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid var(--uie-line-strong);
  border-radius: 12px;
  background: var(--uie-surface);
  color: var(--uie-ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.uie-sheet textarea {
  min-height: 96px;
  resize: none;
}

.uie-sheet textarea:focus,
.uie-sheet input[type="search"]:focus,
.uie-sheet input[type="text"]:focus {
  border-color: #8b8b95;
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 23, 23, 0.1);
}

/* Keyboard up (a short visual viewport): a slimmer text sheet, so more of
   the invitation stays in view above it while typing. */
@media (max-height: 560px) and (orientation: portrait) {
  #uie_frontend_text_sheet .uie-sheet-head {
    padding-top: 10px;
    padding-bottom: 8px;
  }

  #uie_frontend_text_sheet textarea {
    min-height: 64px;
  }

  #uie_frontend_text_sheet .uie-sheet-note {
    display: none;
  }
}

/* QR location sheet */
.uie-location-label {
  display: block;
  margin: 0 0 8px;
  color: var(--uie-ink);
  font-size: 13px;
  font-weight: 600;
}

.uie-location-check {
  display: inline-block;
  margin-left: 4px;
  color: var(--uie-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.uie-font-option {
  display: grid;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--uie-ink);
  cursor: pointer;
  text-align: left;
}

.uie-font-option:hover {
  background: var(--uie-surface-2);
}

.uie-font-option.is-active {
  border-color: var(--uie-ink);
  background: var(--uie-surface-2);
}

.uie-font-option strong {
  overflow: hidden;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uie-font-option small {
  color: var(--uie-muted);
  font-size: 12px;
  white-space: nowrap;
}

.uie-font-empty {
  margin: 0;
  padding: 20px 12px;
  color: var(--uie-muted);
  font-size: 12.5px;
  text-align: center;
}

.uie-font-empty.is-status {
  position: sticky;
  bottom: 0;
  border-top: 1px solid var(--uie-line);
  background: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   Toast
   ========================================================================== */

.uie-toast {
  position: absolute;
  left: 50%;
  /* Set by showToast() on phones: just above the tool and cart bars. */
  bottom: var(--uie-toast-bottom, calc(84px + var(--uie-safe-bottom, 0px)));
  z-index: 60;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(22, 22, 26, 0.95);
  color: #fff;
  font-size: 13px;
  font-weight: 580;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 12px 32px rgba(10, 10, 14, 0.32);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.uie-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.uie-toast.is-error {
  background: #8f2620;
}

/* ==========================================================================
   Small phones — the header must stay one comfortable row
   ========================================================================== */

@media (max-width: 420px) {
  .uie-editor-head {
    gap: 8px;
  }

  .uie-editor-head-copy h2 {
    font-size: 15px;
  }

  /* Undo/redo/revert keep the full 44px here. They used to shrink to 40px on
     the narrowest screens, which is backwards — that is the hardest screen to
     hit a target on. The header copy has min-width:0 and yields instead. */
  .uie-history-group {
    gap: 2px;
  }

  .uie-head-tools {
    gap: 2px;
  }

  .uie-history-group .uie-icon-btn svg {
    width: 19px;
    height: 19px;
  }
}

/* ==========================================================================
   Phones — Canva-like: one clean header row, one compact bottom row, more
   room for the artwork. Targets keep 44px (--uie-tap); only chrome shrinks.
   ========================================================================== */

@media (max-width: 699px) {
  .uie-editor-head {
    padding-top: calc(6px + var(--uie-safe-top, 0px));
    padding-bottom: 6px;
  }

  /* The title stays for screen readers — the dialog is labelled by it. */
  .uie-editor-head-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .uie-head-tools {
    flex: 1 1 auto;
    gap: 6px;
  }

  .uie-history-group {
    padding: 0;
    border-color: transparent;
    background: none;
  }

  /* Pushes Pomoć and the close button to the right edge. On the group, not
     on a button: `.uie-direct-editor button { margin: 0 }` outranks a
     margin set on .uie-help-btn. */
  .uie-head-tools .uie-history-group {
    margin-right: auto;
  }

  .uie-modal-close {
    border-color: transparent;
  }

  .uie-actionbar {
    height: calc(var(--uie-bar-row) + 9px);
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* Sačuvaj · Napomena · Dodaj u korpu on one row. The status line only
     shows while something is happening or went wrong; the toast says the
     rest. */
  .uie-cart-bar {
    padding-top: 8px;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 8px;
  }

  .uie-cart-info {
    display: none;
    grid-column: 1 / -1;
  }

  .uie-cart-info:has(small.is-error, small.is-loading) {
    display: flex;
  }

  .uie-cart-info strong {
    display: none;
  }

  #uie_frontend_note_toggle {
    position: relative;
    width: var(--uie-tap);
    padding: 0;
  }

  /* Visually hidden, still the button's accessible name. */
  #uie_frontend_note_summary {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #uie_frontend_note_toggle.has-value::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #127a4a;
    box-shadow: 0 0 0 2px var(--uie-surface);
  }

  .uie-add-design-to-cart {
    min-width: 0;
    min-height: 48px;
    padding: 8px 12px;
    grid-column: auto;
    font-size: 14.5px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .uie-add-design-to-cart .uie-cta-icon {
    display: none;
  }

  .uie-toast {
    left: 12px;
    right: 12px;
    max-width: none;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.45;
    text-align: left;
    transform: translateY(12px);
  }

  .uie-toast.is-visible {
    transform: translateY(0);
  }
}

/* ==========================================================================
   Short viewports — reclaim height for the artwork
   ========================================================================== */

@media (max-width: 899px) and (max-height: 740px) {
  .uie-editor-head {
    padding-top: calc(7px + var(--uie-safe-top, 0px));
    padding-bottom: 7px;
  }

  .uie-editor-head-copy h2 {
    font-size: 16px;
  }

  .uie-actionbar {
    height: calc(var(--uie-bar-row) + 9px);
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .uie-canvas-area {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .uie-cart-bar {
    padding-top: 8px;
    gap: 6px 8px;
  }

  .uie-add-design-to-cart {
    min-height: 48px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (min-width: 700px) {
  .uie-editor-head {
    padding: 14px 18px;
  }

  .uie-editor-head-copy h2 {
    font-size: 20px;
  }

  .uie-editor-head-copy p {
    display: block;
  }

  .uie-canvas-area {
    padding: 18px;
  }

  .uie-cart-bar {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    padding: 12px 18px calc(12px + var(--uie-safe-bottom, 0px));
    gap: 12px;
  }

  .uie-add-design-to-cart {
    width: auto;
    min-width: 260px;
    grid-column: auto;
  }

  .uie-cart-info strong {
    font-size: 13px;
  }

  .uie-cart-info small {
    font-size: 12px;
  }
}

/* ==========================================================================
   Desktop — toolbar above the stage, popovers instead of sheets
   ========================================================================== */

@media (min-width: 900px) {
  .uie-actionbar {
    order: 2;
    height: calc(var(--uie-bar-row) + 15px);
    padding: 7px 18px;
    justify-content: center;
    border-top: 0;
    border-bottom: 1px solid var(--uie-line);
  }

  .uie-editor-stage {
    order: 3;
  }

  .uie-actionbar-tools {
    width: auto;
    max-width: 100%;
    justify-content: center;
  }

  .uie-canvas-area {
    padding: 24px;
  }

  /* Anchored popover: JS writes --uie-anchor-x / --uie-anchor-y. */
  .uie-sheet.is-anchored {
    align-items: flex-start;
    justify-content: flex-start;
    background: transparent;
    pointer-events: none;
  }

  .uie-sheet.is-anchored::before {
    background: transparent;
  }

  .uie-sheet.is-anchored .uie-sheet-panel {
    position: absolute;
    left: var(--uie-anchor-x, 50%);
    top: var(--uie-anchor-y, 90px);
    width: min(340px, calc(100% - 32px));
    max-height: min(440px, 68%);
    margin-bottom: 0;
    border: 1px solid var(--uie-line-strong);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(12, 12, 16, 0.22);
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    pointer-events: auto;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
  }

  .uie-sheet.is-anchored.is-open .uie-sheet-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .uie-sheet.is-anchored .uie-sheet-grip {
    display: none;
  }

  .uie-sheet.is-anchored .uie-sheet-head {
    padding: 12px 14px 10px;
  }
}

/* ==========================================================================
   Mouse and trackpad — restore the compact sizes.

   Target size follows the pointer, not the screen width: a 44px minimum is a
   finger requirement, and a laptop with a narrow window should not get chunky
   controls. Everything here matches what the desktop looked like before the
   touch sizes were corrected, so nothing changes on a PC.
   ========================================================================== */

@media (pointer: fine) {
  .uie-zoom-control button {
    min-width: 38px;
    height: 38px;
  }

  .uie-tool-align button {
    width: 38px;
    height: 38px;
  }

  /* Align group 38 + 6 + 2 = 46 → a 50px row, same as the other tools. */
  .uie-direct-editor {
    --uie-bar-row: 50px;
  }

  .uie-sheet-done {
    min-height: 38px;
  }
}

/* ==========================================================================
   Phone in landscape — vertical space is scarce, so drop everything optional.
   Declared last so it wins over the tablet rules a wide-but-short screen also
   matches.
   ========================================================================== */

/* Stacked bars left the invitation 140px of a 390px-high screen. Two columns
   instead: the invitation takes the whole height on the left, header, tools
   and cart stack on the right, and sheets open over the right column only,
   so the text being typed stays in view. */
@media (max-height: 480px) and (orientation: landscape) {
  .uie-direct-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(340px, 44vw);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "stage head"
      "stage tools"
      "stage cart";
  }

  .uie-editor-head {
    grid-area: head;
    padding: calc(6px + var(--uie-safe-top, 0px)) max(10px, var(--uie-safe-right, 0px)) 6px 10px;
    border-left: 1px solid var(--uie-line);
  }

  /* The dialog stays labelled by the title; the column has no room for it. */
  .uie-editor-head-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .uie-head-tools {
    flex: 1 1 auto;
  }

  .uie-head-tools .uie-history-group {
    margin-right: auto;
  }

  .uie-editor-stage {
    grid-area: stage;
  }

  .uie-canvas-area {
    padding: 10px max(10px, var(--uie-safe-left, 0px)) 10px 10px;
  }

  .uie-direct-editor.is-sheet-open .uie-canvas-area {
    padding-bottom: 10px;
  }

  .uie-actionbar {
    grid-area: tools;
    height: auto;
    min-height: 0;
    padding: 10px;
    align-items: flex-start;
    overflow-y: auto;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid var(--uie-line);
  }

  .uie-actionbar-tools {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .uie-cart-bar {
    grid-area: cart;
    padding: 8px max(10px, var(--uie-safe-right, 0px)) calc(8px + var(--uie-safe-bottom, 0px)) 10px;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 8px;
    border-left: 1px solid var(--uie-line);
    box-shadow: none;
  }

  .uie-cart-info {
    display: none;
  }

  .uie-add-design-to-cart {
    width: auto;
    min-width: 0;
    min-height: 46px;
    padding: 8px 12px;
    grid-column: auto;
    font-size: 14px;
    white-space: normal;
  }

  .uie-add-design-to-cart .uie-cta-icon {
    display: none;
  }

  #uie_frontend_note_toggle,
  .uie-save-btn {
    width: var(--uie-tap);
    padding: 0;
  }

  #uie_frontend_note_summary,
  .uie-save-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .uie-sheet {
    left: auto;
    right: 0;
    width: min(340px, 44vw);
  }

  .uie-sheet::before {
    background: transparent;
  }

  .uie-sheet-panel,
  #uie_frontend_font_sheet .uie-sheet-panel,
  #uie_frontend_note_sheet .uie-sheet-panel {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border-left: 1px solid var(--uie-line);
    box-shadow: -12px 0 30px rgba(12, 12, 16, 0.16);
    transform: translateX(100%);
  }

  .uie-sheet.is-open .uie-sheet-panel {
    transform: translateX(0);
  }

  .uie-sheet-grip {
    display: none;
  }
}

@keyframes uie-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .uie-sheet-panel,
  .uie-sheet::before,
  .uie-toast,
  .uie-canvas-hint,
  .uie-stage-loader {
    transition: none;
  }

  .uie-spinner,
  .uie-cta-spinner {
    animation-duration: 2.4s;
  }
}