/* Auramystic Studio — upload zone + preview stage.
   Inherits the theme's custom properties; falls back if used elsewhere. */

.auras-upload {
	display: grid;
	gap: 8px;
	padding: 14px;
	border: 1px solid var(--aura-line, #e3e0da);
	border-radius: var(--aura-r, 4px);
	background: var(--aura-surface, #fff);
}

.auras-upload__legend {
	font: 600 10px/1 var(--aura-text, sans-serif);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aura-ink-soft, #6b6862);
}
.auras-upload__legend em { font: 400 10px/1 var(--aura-mono, monospace); text-transform: none; letter-spacing: 0; font-style: normal; opacity: 0.7; }
.auras-upload__note { margin: 0; font-size: 11px; line-height: 1.4; color: var(--aura-ink-faint, #8a8780); }

.auras-drop {
	display: grid;
	gap: 4px;
	place-items: center;
	padding: 26px 16px;
	min-height: 104px;
	border: 2px dashed var(--aura-accent, #2a78d6);
	border-radius: var(--aura-r, 4px);
	background: color-mix(in oklab, var(--aura-accent, #2a78d6) 7%, transparent);
	text-align: center;
	cursor: pointer;
	transition: background-color 140ms linear, border-color 140ms linear, transform 140ms ease;
}
.auras-drop:hover,
.auras-drop:focus-visible { background: color-mix(in oklab, var(--aura-accent, #2a78d6) 13%, transparent); }
.auras-drop.is-over { transform: scale(1.01); border-style: solid; background: color-mix(in oklab, var(--aura-accent, #2a78d6) 18%, transparent); }
.auras-drop.is-filled { padding: 14px; min-height: 0; border-style: solid; opacity: 0.6; }
.auras-drop.is-filled .auras-drop__sub { display: none; }

.auras-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.auras-drop__title { font: 600 13px/1.3 var(--aura-text, sans-serif); color: var(--aura-accent, #2a78d6); }
.auras-drop__sub { font: 400 11px/1.4 var(--aura-mono, monospace); color: var(--aura-ink-faint, #8a8780); }

.auras-progress { height: 4px; border-radius: 99px; background: var(--aura-line, #e3e0da); overflow: hidden; }
.auras-progress__fill { display: block; height: 100%; width: 0%; background: var(--aura-accent, #2a78d6); transition: width 120ms linear; }

.auras-file {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--aura-line, #e3e0da);
	border-radius: var(--aura-r, 4px);
	font-size: 12px;
}
.auras-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--aura-mono, monospace); font-size: 11px; }
.auras-file__chip { padding: 3px 7px; border-radius: 2px; font: 600 9px/1.4 var(--aura-text, sans-serif); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.auras-file__chip.is-ok { background: color-mix(in oklab, var(--aura-ok, #2f8a4f) 18%, transparent); color: var(--aura-ok, #2f8a4f); }
.auras-file__chip.is-warn { background: color-mix(in oklab, var(--aura-warn, #c96a1e) 20%, transparent); color: var(--aura-warn, #c96a1e); }
.auras-file__remove { background: none; border: 0; padding: 4px 6px; cursor: pointer; font: 400 10px/1 var(--aura-mono, monospace); text-decoration: underline; color: var(--aura-ink-faint, #8a8780); }

.auras-upload__error { margin: 0; font-size: 12px; color: var(--aura-warn, #c96a1e); }

/* --- Preview stage -------------------------------------------------------- */
.auras-stage { display: grid; gap: 10px; margin-bottom: 14px; }
.auras-stage[hidden] { display: none; }

.auras-stage__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--aura-line, #e3e0da);
	border-radius: var(--aura-r, 4px);
	background: var(--aura-ph-alt, #f7f6f3);
	touch-action: none;
	cursor: grab;
	isolation: isolate;
}
.auras-stage__frame.is-dragging { cursor: grabbing; }

.auras-stage__plate {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 2;
	pointer-events: none;
	/* The plate sits ON TOP; multiply on the art layer below lets the product's
	   texture and shadows show through the customer's image. */
}

.auras-stage__art {
	position: absolute; inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	will-change: transform;
}
.auras-stage__art img {
	position: absolute;
	top: 50%; left: 50%;
	max-width: none;
	transform-origin: center;
	will-change: width, height, transform;
}

.auras-stage__hidden { display: none; }

.auras-stage__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.auras-tool { display: flex; align-items: center; gap: 8px; font: 600 10px/1 var(--aura-text, sans-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--aura-ink-soft, #6b6862); }
.auras-tool input[type='range'] { width: 110px; accent-color: var(--aura-ink, #1a1a1a); }
.auras-tool--btns { gap: 6px; }
.auras-tool--btns button {
	min-height: 34px; padding: 0 12px; cursor: pointer;
	border: 1px solid var(--aura-line, #e3e0da);
	border-radius: 99px;
	background: transparent;
	font: 600 11px/1 var(--aura-text, sans-serif);
}
.auras-tool--btns button.is-on,
.auras-tool--btns button:hover { background: var(--aura-ink, #1a1a1a); color: var(--aura-bg, #fff); border-color: var(--aura-ink, #1a1a1a); }
.auras-stage__hint { margin: 0; flex-basis: 100%; font: 400 10px/1.4 var(--aura-mono, monospace); color: var(--aura-ink-faint, #8a8780); }

.auras-free { font-weight: 600; color: var(--aura-ok, #2f8a4f); }

@media (prefers-reduced-motion: reduce) {
	.auras-drop, .auras-progress__fill { transition: none; }
}

/* --- Custom design add-on -------------------------------------------------- */
.auras-addon { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.auras-addon input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--aura-ink, #1a1a1a); }
.auras-addon__text { display: grid; gap: 3px; }
.auras-addon__text strong { font: 600 14px/1.3 var(--aura-text, sans-serif); }
.auras-addon__text em { font: 400 11px/1.4 var(--aura-mono, monospace); font-style: normal; color: var(--aura-ink-faint, #8a8780); }
.auras-upload__body { display: grid; gap: 8px; }
.auras-upload__body[hidden] { display: none; }

/* Spacing below the add-on. Simple products sit directly in the cart form's grid
   (12px gap); on variable products it sits inside Woo's variation wrapper, which
   has no gap, so it needs its own margin there. */
.auras-upload { margin-bottom: 12px; }
form.cart > .auras-upload { margin-bottom: 0; }