/* ============================================================
   LW Customisations — Public CSS
   ============================================================ */

/* Block wrapper */
.lwc-customisations-block {
	width: 100%;
	margin: 1rem 0;
}

.lwc-customisations-heading {
	margin-bottom: 1.05rem;
	font-size: var(--at-heading--xs);
}

/* Individual customisation wrap */
.lwc-customisation-wrap {
	margin-bottom: 0.75rem;
}

/* ── Toggle switch ─────────────────────────────────────────── */
.lwc-toggle-label {
	display: inline-block;
	position: relative;
	padding-left: 50px;
	cursor: pointer;
	font-size: 16px;
	line-height: 24px;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 40px;
		height: 24px;
		background-color: var(--at-neutral-l-4, #ccc);
		border-radius: 12px;
		transition: background-color 0.3s;
	}
	&::after {
		content: '';
		position: absolute;
		left: 4px;
		top: 4px;
		width: 16px;
		height: 16px;
		background-color: white;
		border-radius: 50%;
		transition: transform 0.3s;
	}

	& input[type="checkbox"] {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}

	&:has(> input[type="checkbox"]:checked) {
		&::before {
			background-color: var(--at-primary, #007bff);
		}
		&::after {
			transform: translateX(16px);
		}
	}
}

.lwc-toggle-text {
	font-weight: 600;
}

.lwc-toggle-price {
	margin-left: 0.5em;
	color: inherit;
}

.lwc-toggle-price.lwc-is-free del {
	color: #999;
}

.lwc-toggle-price--free {
	color: green;
	font-weight: bold;
}

/* ── Collapsible section ───────────────────────────────────── */
.lwc-customisation-section {
	padding: 1rem;
	border: 1px solid var(--at-neutral-l-2);
	border-radius: 4px;
	margin-top: 0.5rem;
}

.lwc-form-label {
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.lwc-text-wrap {
	max-width: 350px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.7rem;
}

.lwc-text-wrap input[type="text"] {
	flex: 1;
	font-size: var(--at-form-input-font-size);
    color: var(--at-form-input-color);
    font-weight: 500;
    background-color: var(--at-form-input-background-color);
    border-width: var(--at-form-input-border-width);
    border-color: var(--at-form-input-border-color);
    border-radius: var(--at-form-input-border-radius);
    padding-top: var(--at-form-input-padding-block);
    padding-right: var(--at-form-input-padding-inline);
    padding-bottom: var(--at-form-input-padding-block);
    padding-left: var(--at-form-input-padding-inline);
}

.lwc-char-count {
	font-size: 0.85em;
	white-space: nowrap;
}

/* ── Demo images ───────────────────────────────────────────── */
.lwc-demo-images {
	display: flex;
	gap: 1rem;
	margin: 1rem 0;
}

.lwc-demo-images figure {
	display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	flex: 1;
	text-align: center;
	margin: 0;
	padding: 7px;
	border-radius: var(--at-radius--xs);
    border: 2px solid var(--at-neutral-l-4);
}

.lwc-demo-images img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto 0.4rem;
}

.lwc-demo-images figcaption {
	font-size: 0.85em;
	color: #555;
	margin: 0.3rem 0 0;
}

/* ── Live preview overlay ──────────────────────────────────── */
.lwc-preview {
	--lwc-preview-aspect:          1 / 1;
	--lwc-preview-text-top:        63%;
	--lwc-preview-text-left:       50%;
	--lwc-preview-text-translate:  -50%, -50%;
	--lwc-preview-text-rotate:     0deg;
	--lwc-preview-text-origin:     center center;
	--lwc-preview-font-size:       clamp(1.4rem, 10cqw, 2.8rem);
	--lwc-preview-color:           #111;
	--lwc-preview-letter-spacing:  0;
	--lwc-preview-writing-mode:    horizontal-tb;

	position: relative;
	aspect-ratio: var(--lwc-preview-aspect);
	overflow: hidden;
	width: 100%;
}

.lwc-demo-images .lwc-preview > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	margin: 0;
}

.lwc-customisation-wrap[data-lwc-customisation="engraving"] .lwc-demo-image-1 {
	flex: 0 0 auto;
}

.lwc-demo-image-2 {
	container-type: inline-size;
	max-width: 50%;
}

.lwc-preview-text {
	position: absolute;
	z-index: 1;
	top: var(--lwc-preview-text-top);
	left: var(--lwc-preview-text-left);
	transform: translate(var(--lwc-preview-text-translate));
	transform-origin: var(--lwc-preview-text-origin);
	writing-mode: var(--lwc-preview-writing-mode);
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: var(--lwc-preview-font-size);
	line-height: 1.4;
	color: var(--lwc-preview-color);
	letter-spacing: var(--lwc-preview-letter-spacing);
	white-space: pre;
	pointer-events: none;
	user-select: none;
}

/*.lwc-preview-personalised_tag .lwc-preview-text {
	margin-left: 14px;
}*/

/* Engraving — vertical top-to-bottom, glyphs upright */
.lwc-preview-engraving {
	--lwc-preview-writing-mode: vertical-rl;
	--lwc-preview-text-top:     63%;
	--lwc-preview-text-left:    51%;
}

/* Personalised Tag  */
.lwc-preview-personalised_tag {
	--lwc-preview-text-top:    35%;
	--lwc-preview-text-left:   50%;
}

.lwc-preview-personalised_tag .lwc-preview-qr {
	position: absolute;
	top: 63%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 17%;
	aspect-ratio: 1 / 1;
	pointer-events: none;
	z-index: 1;
}

.lwc-preview-personalised_tag .lwc-preview-qr svg {
	width: 100%;
	height: 100%;
	display: block;
	path {
		fill: #000000;
	}
}

/* ── Terms / suffix ────────────────────────────────────────── */
.lwc-terms-label {
	margin-bottom: 0.75rem;
	font-size: 0.9em;
}

/* ── Email confirm field (hidden until email is entered) ───── */
.lwc-tag-email-confirm-wrap[hidden] {
	display: none;
}

/* ── Inline field errors ───────────────────────────────────── */
.lwc-field-error {
	display: block;
	color: #b32d2e;
	font-size: 0.85em;
	margin-top: -0.5rem;
	margin-bottom: 0.75rem;
	min-height: 1em;
}

.lwc-suffix {
	font-size: 0.85em;
	color: #555;
	margin: 0;
}

.lwc-required {
	color: #e00;
	font-weight: bold;
	margin-left: 2px;
}

/* ── Cart — child line items ───────────────────────────────── */
.lwc-child-item {
	opacity: 0.9;
}

/* Classic cart ↳ indicator handled via woocommerce_cart_item_class CSS class */

/* Block cart ↳ indicator */
.wc-block-cart-items__row.lwc-child-item,
.wc-block-cart-items__row.lwc-engraving-item {
	position: relative;
	width: 100%;
	padding-left: 2em !important;

	.wc-block-components-quantity-selector {
		display: none;
	}
}

.wc-block-cart-items__row.lwc-child-item::before,
.wc-block-cart-items__row.lwc-engraving-item::before {
	content: '↳';
	position: absolute;
	left: 1em;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 1em;
}