/**
 * Chevalior Embroidery — frontend styles.
 */

/* All plugin fields use the theme's default font, Montserrat Light. */
.ce-embroidery,
.ce-embroidery h3,
.ce-embroidery p,
.ce-embroidery label,
.ce-embroidery legend,
.ce-embroidery input,
.ce-embroidery select,
.ce-embroidery button,
.ce-embroidery textarea {
	font-family: 'Montserrat', 'Montserrat Light', sans-serif;
	font-weight: 300;
}

.ce-embroidery {
	margin: 1.5em 0;
	padding: 1.25em;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fafafa;
}

.ce-embroidery .ce-title {
	margin: 0 0 .5em;
	font-size: 1.1em;
	font-weight: 700;
}

.ce-intro-text {
	margin: 0 0 1em;
	color: #444;
}

.ce-intro-text p {
	margin: 0 0 .5em;
}

.ce-surcharge-info {
	margin: 0 0 1em;
	color: #555;
}

/* Preview disclaimer note (below fields, above price summary) — a plain
   paragraph by default; text/background colours are set from the backend. */
.ce-preview-note {
	margin: 1em 0;
	font-size: .92em;
}

.ce-preview-note p {
	margin: 0;
}

/* Stacked embroidery cards (one per placement). */
.ce-items {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.ce-embroidery-item {
	padding: 1em;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fff;
}

.ce-item-head {
	margin-bottom: .75em;
}

.ce-enable-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	cursor: pointer;
}

/* Master opt-in toggle */
.ce-master-toggle {
	font-weight: 400;
	padding: .6em .8em;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	background: #fff;
}

.ce-items-wrap {
	margin-top: 1.25em;
}

/* Ensure the hidden attribute is honored even if the theme overrides [hidden]. */
.ce-embroidery [hidden] {
	display: none !important;
}

.ce-item-name {
	font-weight: 400;
}

.ce-preview-wrap {
	max-width: 420px;
	margin: 0 auto 1em;
}

.ce-canvas {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
}

.ce-field {
	margin: 0 0 1em;
}

.ce-field > label,
.ce-field legend {
	display: block;
	margin-bottom: .35em;
}

.ce-field input[type="text"] {
	width: 100%;
	max-width: 420px;
	padding: .5em .65em;
	box-sizing: border-box;
}

.ce-font-grid {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

.ce-color-grid {
	display: flex;
	flex-wrap: wrap;
	gap: .5em .9em;
}

.ce-font-option {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .4em .7em;
	border: 1px solid #ccc;
	border-radius: 6px;
	cursor: pointer;
	background: #fff;
}

.ce-font-option input {
	margin: 0;
}

.ce-font-sample {
	font-size: 1.1em;
	line-height: 1.2;
}

.ce-color-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	cursor: pointer;
}

.ce-color-option input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.ce-color-swatch {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid #c9c9c9;
	box-shadow: 0 0 0 1px transparent;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.ce-color-option input:checked + .ce-color-swatch {
	border-color: #333;
	box-shadow: 0 0 0 1px #333;
}

.ce-color-option input:focus-visible + .ce-color-swatch {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.ce-color-name {
	font-size: .9em;
	line-height: 1;
}

.ce-color-option input:checked ~ .ce-color-name {
	font-weight: 600;
}

.ce-total-note {
	margin-top: 1em;
	font-weight: 400;
}

/* Promotion: "Du sparst …" message. Colours come from the backend (inline). */
.ce-total-note.ce-promo {
	font-weight: 600;
	padding: .5em .75em;
	border-radius: 6px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}