/* Phase 3 + 6: engraving input field and live preview overlay. */

/* ---------- Input field ---------- */
.wep-engraving-field {
	margin: 0 0 1.25em;
	width: 100%;
}

.wep-engraving-label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.wep-engraving-input {
	width: 100%;
	min-height: 2.6em;
	padding: 0.6em 0.75em;
	line-height: 1.4;
	resize: vertical;
	box-sizing: border-box;
}

.wep-engraving-counter {
	margin-top: 0.35em;
	font-size: 0.85em;
	opacity: 0.7;
}

/* ---------- Preview overlay ---------- */
/* The host (.woocommerce-product-gallery__image) is set to position:relative in JS. */
.engraving-preview-layer {
	position: absolute;
	z-index: 5;
	transform: translate(-50%, -50%); /* anchor by its own centre on the top/left point */
	box-sizing: border-box;
	pointer-events: none;

	text-align: center;
	line-height: 1.15;
	color: #1a1a1a;

	/* Preserve user line breaks and wrap long words. */
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: break-word;

	/* Inherit the WoodMart/theme font by default (Phase 6). */
	font-family: inherit;

	/* Container-query unit makes the text scale with the overlay width;
	   clamp keeps it readable on tiny and huge screens. cqw falls back to vw. */
	container-type: inline-size;
	font-size: clamp(0.6rem, 8cqw, 3rem);
}

/* Older browsers without container query support: scale to viewport width. */
@supports not (font-size: 1cqw) {
	.engraving-preview-layer {
		font-size: clamp(0.6rem, 5vw, 3rem);
	}
}

/* ---------- Selectable fonts (Phase 6) ---------- */
.engraving-font-serif,
.engraving-font-serif.wep-engraving-input {
	font-family: Georgia, "Times New Roman", serif;
}

.engraving-font-sans,
.engraving-font-sans.wep-engraving-input {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.engraving-font-script,
.engraving-font-script.wep-engraving-input {
	font-family: "Brush Script MT", "Segoe Script", "Comic Sans MS", cursive;
}