/* Egyedi Rendszámos Kulcstartó — frontend
 * Configurator chrome uses dsp-theme tokens.
 * The keychain itself uses physical product colours (plate / EU band).
 */

.dsp-erk-preview-wrap,
.dsp-erk {
	--dsp-erk-ui-text: var(--dsp-color-text-primary, #1a1a1a);
	--dsp-erk-ui-muted: var(--dsp-color-text-muted, #666);
	--dsp-erk-ui-border: var(--dsp-color-border-default, #d8d8d8);
	--dsp-erk-ui-bg: var(--dsp-color-bg-surface, #fafafa);
	--dsp-erk-ui-field: var(--dsp-color-bg-base, #fff);
	--dsp-erk-ui-accent: var(--dsp-color-accent, #ff1e1e);
	box-sizing: border-box;
}

.dsp-erk-preview-wrap *,
.dsp-erk * {
	box-sizing: border-box;
}

.dsp-erk-preview-wrap {
	width: 100%;
	margin: 0 0 1.25rem;
}

.dsp-erk-preview-wrap__label {
	margin: 0 0 0.55rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dsp-erk-ui-muted);
}

.dsp-erk-preview-wrap__disclaimer {
	margin: 0.5rem 0 0;
	max-width: 36rem;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--dsp-erk-ui-muted);
}

/* Physical keychain — 52.2995 × 13.8789 mm aspect from 3MF. */
.dsp-erk-preview {
	width: 100%;
	max-width: 36rem;
}

.dsp-erk-preview__keychain {
	position: relative;
	width: 100%;
	aspect-ratio: var(--dsp-erk-ratio, 52.2995 / 13.8789);
	container-type: size;
	filter: drop-shadow(0 10px 22px rgb(0 0 0 / 28%));
}

.dsp-erk-preview__plate {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	height: 100%;
	padding: calc(var(--dsp-erk-rim-pad, 0.0127) * 100%);
	border-radius: calc(var(--dsp-erk-rx, 3.06) * 1%) / calc(var(--dsp-erk-ry, 11.53) * 1%);
	background: var(--dsp-erk-rim, #f3f3f3);
	overflow: hidden;
}

.dsp-erk-preview__eu {
	position: relative;
	flex: 0 0 calc(100% * var(--dsp-erk-eu, 0.186));
	width: calc(100% * var(--dsp-erk-eu, 0.186));
	display: block;
	padding: 0;
	background: var(--dsp-erk-eu-bg, #003399);
	overflow: hidden;
}

.dsp-erk-preview__hole {
	position: absolute;
	top: 8cqh;
	left: 50%;
	width: calc(var(--dsp-erk-hole, 0.30) * 100cqh);
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 48%, #1c1c1c 0 36%, #f4f4f4 40% 100%);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 28%);
}

.dsp-erk-preview__code {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8cqh;
	height: 24cqh;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6%;
	color: var(--dsp-erk-eu-text, #fff);
	font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
	font-weight: 700;
	font-size: 14cqh;
	letter-spacing: 0.03em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
}

.dsp-erk-preview__legend {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13cqh 4.5%;
	background: var(--dsp-erk-plate-bg, #cfcfcf);
	overflow: hidden;
}

.dsp-erk-preview__text {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	color: var(--dsp-erk-text, #2b2b2b);
	font-family: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
	font-weight: 500;
	font-size: 1em;
	letter-spacing: 0.04em;
	line-height: 1;
	text-align: center;
	text-transform: none;
}

/* Purchase fields */
.dsp-erk {
	margin: 0 0 1.15rem;
	padding: 1rem 1.05rem 1.1rem;
	border: 1px solid var(--dsp-erk-ui-border);
	border-radius: 12px;
	background: var(--dsp-erk-ui-bg);
	color: var(--dsp-erk-ui-text);
}

.dsp-erk__field {
	margin: 0 0 0.9rem;
}

.dsp-erk__label {
	display: block;
	margin: 0 0 0.4rem;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--dsp-erk-ui-text);
}

.dsp-erk__input,
.dsp-erk__select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--dsp-erk-ui-border);
	border-radius: 8px;
	background: var(--dsp-erk-ui-field);
	color: var(--dsp-erk-ui-text);
	font: inherit;
	font-size: 1rem;
}

.dsp-erk__input::placeholder {
	color: var(--dsp-erk-ui-muted);
	opacity: 1;
}

.dsp-erk__input:focus,
.dsp-erk__select:focus {
	outline: 2px solid var(--dsp-erk-ui-accent);
	outline-offset: 2px;
}

.dsp-erk__counter {
	margin: 0.3rem 0 0;
	font-size: 0.78rem;
	color: var(--dsp-erk-ui-muted);
	text-align: right;
}

.dsp-erk__hint {
	margin: 0.25rem 0 0;
	font-size: 0.78rem;
	color: var(--dsp-erk-ui-muted);
	line-height: 1.35;
}

.dsp-erk__price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.35rem 0 0;
	color: var(--dsp-erk-ui-text);
}

.dsp-erk__price-label {
	font-size: 0.88rem;
	color: var(--dsp-erk-ui-muted);
}

.dsp-erk__price strong {
	font-size: 1.25rem;
	color: var(--dsp-color-accent, var(--dsp-erk-ui-text));
}

.dsp-erk__error {
	margin: 0.65rem 0 0;
	padding: 0.5rem 0.65rem;
	border-radius: 6px;
	background: color-mix(in srgb, var(--dsp-color-error, #c0392b) 14%, var(--dsp-erk-ui-bg));
	color: var(--dsp-color-error, #8a1f1f);
	font-size: 0.88rem;
}

.dsp-erk__error[hidden] {
	display: none;
}

@media (max-width: 782px) {
	.dsp-erk-preview {
		max-width: 100%;
	}
}