/**
 * Wizard registrazione operatore — continuità gateway (karmalink-gateway).
 */

.karmalink-operator-wizard {
	text-align: left;
}

/**
 * La gateway marketing usa flex + align-items:center. Sul wizard l’altezza del
 * pannello cambia spesso (step diversi, pill che si disabilitano a 5/5 e
 * riabilitano sotto 5): il blocco viene ricentrato verticalmente e “salta”,
 * tagliato da overflow:hidden o sovrapposto all’header. Partiamo dall’alto.
 */
.karmalink-gateway.karmalink-operator-wizard {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	/*
	 * Non usare align-self:flex-start + width:100%: in un flex column del tema
	 * il figlio si restringe al contenuto (~640px) e il 100% annulla il 100vw
	 * della gateway → fascia scura a destra. Full bleed come .karmalink-gateway.
	 */
	align-self: stretch !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box !important;
	scroll-margin-top: clamp(48px, 8vh, 96px);
}

/**
 * Solo schermata “registrazione inviata”: riallinea al centro (dopo la regola flex-start sopra).
 */
.karmalink-gateway.karmalink-operator-wizard.karmalink-operator-wizard--completion-only {
	align-items: center !important;
	justify-content: center !important;
}

.karmalink-operator-wizard .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.karmalink-operator-wizard .karmalink-gateway__content {
	text-align: left;
	max-width: 640px;
}

.karmalink-operator-wizard__wrap {
	position: relative;
	width: 100%;
	z-index: 1;
	padding: clamp(16px, 3vw, 28px);
}

/**
 * Layer tra canvas animato e contenuto: attenua movimento e luminosità
 * così la compilazione resta leggibile (scurimento + sfocatura sullo sfondo).
 */
.karmalink-operator-wizard__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 20px;
	pointer-events: none;
	background: rgba(14, 14, 16, 0.22);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: inset 0 0 0 1px rgba(248, 247, 245, 0.06);
}

.karmalink-operator-wizard__inner {
	position: relative;
	z-index: 1;
}

.karmalink-operator-wizard__back {
	margin: 0 0 20px;
	padding: 0;
	background: none;
	border: none;
	display: block;
}

.karmalink-operator-wizard__back-link {
	color: var(--kl-primary);
	text-decoration: none;
	font-size: 14px;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	transition: color 0.2s ease;
}

.karmalink-operator-wizard__back-link:hover,
.karmalink-operator-wizard__back-link:focus-visible {
	text-decoration: none;
	color: var(--kl-secondary);
	outline: none;
}

.karmalink-operator-wizard__notice {
	padding: 14px 18px;
	border-radius: 12px;
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.45;
}

.karmalink-operator-wizard__notice--success {
	background: rgba(42, 211, 125, 0.12);
	border: 1px solid rgba(42, 211, 125, 0.35);
	color: var(--kl-text);
}

.karmalink-operator-wizard__notice--error {
	background: rgb(255 0 0 / 10%);
	border: 1px solid rgb(255 0 0 / 40%);
	color: #fffffe;
}

.karmalink-operator-wizard__notice-link {
	color: var(--kl-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.karmalink-operator-wizard__notice-link:hover,
.karmalink-operator-wizard__notice-link:focus-visible {
	color: var(--kl-secondary);
	outline: none;
}

/* Link “Accedi” solo step 1: palette invertita rispetto al .notice-link standard (lilla → arancio, hover lilla). */
.karmalink-operator-wizard__step1-login-footer {
	margin: 1.5rem 0 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
}

.karmalink-operator-wizard__step1-login-link,
.karmalink-operator-wizard__step1-login-link:hover,
.karmalink-operator-wizard__step1-login-link:focus-visible {
	color: var(--kl-secondary);
	font-weight: 600;
	text-decoration: none;
	text-underline-offset: 0;
}

.karmalink-operator-wizard__step1-login-link:hover,
.karmalink-operator-wizard__step1-login-link:focus-visible {
	color: var(--kl-primary);
	outline: none;
}

.karmalink-operator-wizard__completion {
	text-align: center;
	padding: clamp(8px, 2vw, 16px) 0;
}

.karmalink-operator-wizard__completion-message {
	margin-bottom: clamp(20px, 4vw, 32px);
}

.karmalink-operator-wizard__completion-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 14px;
}

.karmalink-operator-wizard__completion-actions .karmalink-operator-wizard__btn {
	flex: 1 1 200px;
	max-width: 100%;
	text-decoration: none;
	box-sizing: border-box;
	position: relative;
	z-index: 0;
	isolation: isolate;
	color: #fff;
	-webkit-font-smoothing: antialiased;
}

.karmalink-operator-wizard__completion-actions .karmalink-operator-wizard__btn:visited {
	color: #fff;
}

.karmalink-operator-wizard__completion-actions .karmalink-operator-wizard__btn:hover,
.karmalink-operator-wizard__completion-actions .karmalink-operator-wizard__btn:focus-visible,
.karmalink-operator-wizard__completion-actions .karmalink-operator-wizard__btn:active {
	color: #fff !important;
	text-decoration: none;
	outline: none;
}

/**
 * “Torna al sito”: stesso schema del primary (doppio gradiente + inversione + glow), palette arancio.
 */
.karmalink-operator-wizard__btn--completion-site {
	overflow: visible;
	background: transparent;
	border: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	transition: transform 0.2s ease;
}

.karmalink-operator-wizard__btn--completion-site::before,
.karmalink-operator-wizard__btn--completion-site::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: -1;
	transition: opacity 0.4s ease;
}

.karmalink-operator-wizard__btn--completion-site::before {
	background: linear-gradient(to bottom right, #ff7a00 0%, #ff8d40 100%);
	opacity: 1;
}

.karmalink-operator-wizard__btn--completion-site::after {
	background: linear-gradient(to bottom right, #ff8d40 0%, #ff7a00 100%);
	opacity: 0;
}

.karmalink-operator-wizard__btn--completion-site:hover,
.karmalink-operator-wizard__btn--completion-site:focus-visible {
	transform: translateY(-1px);
}

.karmalink-operator-wizard__btn--completion-site:hover::before,
.karmalink-operator-wizard__btn--completion-site:focus-visible::before {
	opacity: 0;
}

.karmalink-operator-wizard__btn--completion-site:hover::after,
.karmalink-operator-wizard__btn--completion-site:focus-visible::after {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.karmalink-operator-wizard__btn--completion-site:hover,
	.karmalink-operator-wizard__btn--completion-site:focus-visible {
		animation: karmalink-wizard-step-glow-pulse-customer 2.4s ease-in-out infinite;
	}

	.karmalink-operator-wizard__completion-actions .karmalink-operator-wizard__btn--primary:hover,
	.karmalink-operator-wizard__completion-actions .karmalink-operator-wizard__btn--primary:focus-visible {
		animation: karmalink-wizard-step-glow-pulse 2.4s ease-in-out infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.karmalink-operator-wizard__btn--completion-site::before,
	.karmalink-operator-wizard__btn--completion-site::after {
		transition: opacity 0.2s ease;
	}

	.karmalink-operator-wizard__btn--completion-site:hover,
	.karmalink-operator-wizard__btn--completion-site:focus-visible {
		animation: none;
		box-shadow:
			0 0 0 4px rgba(255, 122, 0, 0.45),
			0 0 20px rgba(255, 141, 64, 0.65),
			0 0 40px rgba(255, 122, 0, 0.45),
			0 0 64px rgba(255, 122, 0, 0.28),
			0 0 88px rgba(255, 122, 0, 0.14);
	}

	.karmalink-operator-wizard__completion-actions .karmalink-operator-wizard__btn--primary:hover,
	.karmalink-operator-wizard__completion-actions .karmalink-operator-wizard__btn--primary:focus-visible {
		animation: none;
		box-shadow:
			0 0 0 4px rgba(140, 82, 255, 0.48),
			0 0 20px rgba(140, 82, 255, 0.72),
			0 0 40px rgba(140, 82, 255, 0.5),
			0 0 64px rgba(140, 82, 255, 0.32),
			0 0 88px rgba(140, 82, 255, 0.16);
	}
}

/* @keyframes completion (viola/arancio) → ora usano le keyframe condivise di karmalink-glow.css */

.karmalink-operator-wizard__recaptcha-error {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--kl-secondary);
}

.karmalink-operator-wizard__form {
	margin: 0;
}

.karmalink-operator-wizard__progress {
	margin-bottom: var(--kl-w-gap, 28px);
}

.karmalink-operator-wizard__steps {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
	position: relative;
}

.karmalink-operator-wizard__steps::before {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	top: 11px;
	height: 2px;
	background: rgba(248, 247, 245, 0.12);
	z-index: 0;
}

.karmalink-operator-wizard__step-dot {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
	z-index: 1;
	min-width: 0;
}

.karmalink-operator-wizard__step-bubble {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: rgba(36, 36, 41, 0.95);
	border: 2px solid rgba(248, 247, 245, 0.2);
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.35s ease;
}

/*
 * Glow stepper — dove intervenire per test (cerca i blocchi box-shadow):
 * - Passo attivo: background riga ~140; ombre righe ~141-146
 * - Passi completati: righe 153-158
 * - Pulse: stessi numeri in 0%/100% (righe 170-175) e picco in 50% (righe 178-183)
 * - Durata pulse: riga 163 (es. 2.4s)
 */
/* Passo corrente: alone viola stratificato (glow) */
.karmalink-operator-wizard__step-dot.is-active .karmalink-operator-wizard__step-bubble {
	border-color: var(--kl-primary);
	background: var(--kl-primary);
	box-shadow:
		0 0 0 4px rgba(140, 82, 255, 0.48),
		0 0 20px rgba(140, 82, 255, 0.72),
		0 0 40px rgba(140, 82, 255, 0.5),
		0 0 64px rgba(140, 82, 255, 0.32),
		0 0 88px rgba(140, 82, 255, 0.16);
}

/* Passi già completati: riempimento + alone più compatto */
.karmalink-operator-wizard__step-dot.is-done .karmalink-operator-wizard__step-bubble {
	border-color: var(--kl-primary);
	background: var(--kl-primary);
	box-shadow:
		0 0 0 3px rgba(140, 82, 255, 0.55),
		0 0 16px rgba(140, 82, 255, 0.85),
		0 0 32px rgba(140, 82, 255, 0.55),
		0 0 52px rgba(140, 82, 255, 0.35),
		0 0 72px rgba(140, 82, 255, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
	.karmalink-operator-wizard__step-dot.is-active .karmalink-operator-wizard__step-bubble {
		animation: karmalink-wizard-step-glow-pulse 2.4s ease-in-out infinite;
	}
}

/* @keyframes karmalink-wizard-step-glow-pulse → fonte unica in karmalink-glow.css */

.karmalink-operator-wizard__step-label {
	font-family: "Inter", sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(248, 247, 245, 0.45);
	text-align: center;
	line-height: 1.2;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.karmalink-operator-wizard__step-dot.is-active .karmalink-operator-wizard__step-label {
	color: var(--kl-text);
}

.karmalink-operator-wizard__step-dot.is-done .karmalink-operator-wizard__step-bubble {
	background: rgba(140, 82, 255, 0.45);
}

.karmalink-operator-wizard__step-dot.is-done .karmalink-operator-wizard__step-label {
	color: var(--kl-text-muted);
}

.karmalink-operator-wizard__panel {
	animation: karmalink-wizard-fade 0.35s ease;
}

@keyframes karmalink-wizard-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.karmalink-operator-wizard__panel {
		animation: none;
	}

	.karmalink-operator-wizard__step-dot.is-active .karmalink-operator-wizard__step-bubble {
		animation: none;
	}

	.karmalink-operator-wizard__input:focus,
	.karmalink-operator-wizard__textarea:focus {
		animation: none;
		box-shadow:
			0 0 0 4px rgba(140, 82, 255, 0.48),
			0 0 20px rgba(140, 82, 255, 0.72),
			0 0 40px rgba(140, 82, 255, 0.5),
			0 0 64px rgba(140, 82, 255, 0.32),
			0 0 88px rgba(140, 82, 255, 0.16);
	}
}

.karmalink-operator-wizard__microcopy {
	color: var(--kl-primary);
	font-size: 14px;
	margin: 0 0 8px;
	font-weight: 500;
}

.karmalink-operator-wizard__title {
	margin: 0 0 10px;
	color: var(--kl-text);
	font-size: clamp(24px, 4vw, 34px);
	font-weight: 300;
	font-family: "Be Vietnam Pro", sans-serif;
	line-height: 1.15;
}

.karmalink-operator-wizard__lead {
	margin: 0 0 20px;
	color: var(--kl-text-muted);
	font-size: 15px;
	line-height: 1.45;
	font-family: "Be Vietnam Pro", sans-serif;
}

/*
 * Il disclaimer usa la classe condivisa della vetrina. Nel wizard il tema può
 * assegnare un colore chiaro ai paragrafi e renderli illeggibili sul suo
 * precedente fondo chiaro: qui adotta la stessa superficie grigio-scura dei
 * campi e dichiara esplicitamente i colori dei contenuti.
 */
.karmalink-operator-wizard .karmalink-disclaimer-inline--registration {
	margin: 1rem 0 1.25rem;
	padding: 1.15rem 1.25rem;
	background: rgba(36, 36, 41, 0.94) !important;
	border: 1px solid rgba(248, 247, 245, 0.16) !important;
	border-radius: 12px;
	color: var(--kl-text, #f8f7f5) !important;
	box-shadow: none;
}

.karmalink-operator-wizard .karmalink-disclaimer-inline--registration .karmalink-showcase__compliance-notice__title {
	color: var(--kl-text, #f8f7f5) !important;
}

.karmalink-operator-wizard .karmalink-disclaimer-inline--registration .karmalink-disclaimer-inline__body,
.karmalink-operator-wizard .karmalink-disclaimer-inline--registration .karmalink-disclaimer-inline__body p,
.karmalink-operator-wizard .karmalink-disclaimer-inline--registration .karmalink-disclaimer-inline__body li,
.karmalink-operator-wizard .karmalink-disclaimer-inline--registration .karmalink-disclaimer-inline__body strong {
	color: var(--kl-text-muted, rgba(248, 247, 245, 0.82)) !important;
}

.karmalink-operator-wizard .karmalink-disclaimer-inline--registration .karmalink-disclaimer-inline__body a {
	color: var(--kl-secondary, #ff7a00) !important;
}

.karmalink-operator-wizard__fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.karmalink-operator-wizard__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Titolo del campo dentro l’area input: visibile finché il controllo non ha focus e non è compilato */
.karmalink-operator-wizard__field--inner-ph {
	gap: 4px;
}

.karmalink-operator-wizard__input-wrap {
	position: relative;
	width: 100%;
}

.karmalink-operator-wizard__input-wrap .karmalink-operator-wizard__input,
.karmalink-operator-wizard__input-wrap .karmalink-operator-wizard__textarea {
	position: relative;
	z-index: 1;
}

.karmalink-operator-wizard__inner-ph {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 12px 14px;
	pointer-events: none;
	border-radius: 10px;
	font-size: 15px;
	font-family: "Be Vietnam Pro", sans-serif;
	line-height: 1.35;
	color: rgba(248, 247, 245, 0.42);
	transition: opacity 0.18s ease;
}

.karmalink-operator-wizard__input-wrap--textarea .karmalink-operator-wizard__inner-ph {
	align-items: flex-start;
}

.karmalink-operator-wizard__inner-ph--bio-hint {
	font-size: 12px;
	line-height: 1.45;
}

/* Password: spazio per il toggle mostra/nascondi */
.karmalink-operator-wizard__input-wrap--password .karmalink-operator-wizard__input {
	padding-right: 44px;
}

.karmalink-operator-wizard__input-wrap--password .karmalink-operator-wizard__inner-ph {
	padding-right: 44px;
}

.karmalink-operator-wizard__password-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: rgba(248, 247, 245, 0.38);
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

.karmalink-operator-wizard__password-toggle:hover,
.karmalink-operator-wizard__password-toggle:focus-visible {
	color: rgba(248, 247, 245, 0.72);
	background: rgba(248, 247, 245, 0.06);
	outline: none;
}

.karmalink-operator-wizard__password-toggle:focus-visible {
	box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.35);
}

.karmalink-operator-wizard__pwd-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.karmalink-operator-wizard__pwd-icon--hide {
	display: none;
}

.karmalink-operator-wizard__password-toggle[aria-pressed="true"] .karmalink-operator-wizard__pwd-icon--show {
	display: none;
}

.karmalink-operator-wizard__password-toggle[aria-pressed="true"] .karmalink-operator-wizard__pwd-icon--hide {
	display: inline-flex;
}

.karmalink-operator-wizard__field--inner-ph:focus-within .karmalink-operator-wizard__inner-ph,
.karmalink-operator-wizard__field--inner-ph.is-filled .karmalink-operator-wizard__inner-ph {
	opacity: 0;
}

.karmalink-operator-wizard__label {
	font-family: "Inter", sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(248, 247, 245, 0.65);
}

/* Domanda a tutta larghezza sopra alle opzioni “tipo attività” (step 2) */
.karmalink-operator-wizard__field-prompt {
	display: block;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(248, 247, 245, 0.9);
	margin: 0;
}

.karmalink-operator-wizard__field--operator-type {
	gap: 8px;
}

.karmalink-operator-wizard__operator-type-fieldset {
	border: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.karmalink-operator-wizard__operator-type-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(74, 68, 85, 0.35);
	background: rgba(30, 30, 32, 0.85);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: "Be Vietnam Pro", sans-serif;
}

.karmalink-operator-wizard__operator-type-item:hover {
	border-color: rgba(248, 247, 245, 0.14);
}

.karmalink-operator-wizard__operator-type-item:has(.karmalink-operator-wizard__operator-type-input:checked) {
	border-color: rgba(140, 82, 255, 0.55);
	box-shadow: 0 0 0 1px rgba(140, 82, 255, 0.2);
}

.karmalink-operator-wizard__operator-type-item:has(.karmalink-operator-wizard__operator-type-input:focus-visible) {
	outline: none;
	border-color: var(--kl-primary);
	box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.35);
}

.karmalink-operator-wizard__operator-type-input {
	margin: 3px 0 0;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: var(--kl-primary);
	cursor: pointer;
}

.karmalink-operator-wizard__operator-type-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}

.karmalink-operator-wizard__operator-type-main {
	font-size: 15px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--kl-text);
}

.karmalink-operator-wizard__operator-type-sub {
	font-size: 12px;
	line-height: 1.45;
	color: rgba(248, 247, 245, 0.48);
}

.karmalink-operator-wizard__hint--after-select {
	margin-top: 2px;
	line-height: 1.45;
}

.karmalink-operator-wizard__input,
.karmalink-operator-wizard__textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid rgba(74, 68, 85, 0.35);
	background: rgba(30, 30, 32, 0.85);
	color: var(--kl-text);
	font-size: 15px;
	font-family: "Be Vietnam Pro", sans-serif;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus: stesso glow pulsante del pallino (animation: karmalink-wizard-step-glow-pulse). */
.karmalink-operator-wizard__input:focus,
.karmalink-operator-wizard__textarea:focus {
	outline: none;
	border-color: var(--kl-primary);
}

@media (prefers-reduced-motion: no-preference) {
	.karmalink-operator-wizard__input:not([disabled]):hover,
	.karmalink-operator-wizard__textarea:not([disabled]):hover,
	.karmalink-operator-wizard__input:focus,
	.karmalink-operator-wizard__textarea:focus {
		animation: karmalink-wizard-step-glow-pulse 2.4s ease-in-out infinite;
	}
}

.karmalink-operator-wizard__textarea {
	min-height: 120px;
	resize: vertical;
}

.karmalink-operator-wizard__input-wrap select.karmalink-operator-wizard__input {
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(248, 247, 245, 0.45) 50%),
		linear-gradient(135deg, rgba(248, 247, 245, 0.45) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: 36px;
}

.karmalink-operator-wizard__hint {
	font-size: 12px;
	color: rgba(248, 247, 245, 0.45);
}

.karmalink-operator-wizard__field-error {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--kl-secondary);
}

.karmalink-operator-wizard__check--nickname-public {
	margin-top: 4px;
}

.karmalink-operator-wizard__check-text--nickname-public {
	font-size: 12px;
	line-height: 1.2;
}

.karmalink-operator-wizard__counter {
	font-size: 15px;
	margin: 0 0 12px;
	color: var(--kl-text);
}

.karmalink-operator-wizard__search {
	margin-bottom: 14px;
}

.karmalink-operator-wizard__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-content: flex-start;
	max-height: min(42vh, 320px);
	overflow-y: scroll;
	overflow-anchor: none;
	overscroll-behavior: contain;
	padding: 4px 2px 12px;
	scrollbar-gutter: stable;
	/* Barra sempre percepibile (evita scrollbar overlay che sparisce al riposo su macOS) */
	scrollbar-width: thin;
	scrollbar-color: rgba(248, 247, 245, 0.35) rgba(24, 24, 28, 0.85);
}

.karmalink-operator-wizard__pills::-webkit-scrollbar {
	width: 10px;
}

.karmalink-operator-wizard__pills::-webkit-scrollbar-track {
	background: rgba(24, 24, 28, 0.85);
	border-radius: 6px;
}

.karmalink-operator-wizard__pills::-webkit-scrollbar-thumb {
	background: rgba(248, 247, 245, 0.3);
	border-radius: 6px;
	border: 2px solid rgba(24, 24, 28, 0.85);
}

.karmalink-operator-wizard__pills::-webkit-scrollbar-thumb:hover {
	background: rgba(248, 247, 245, 0.45);
}

.karmalink-operator-wizard__pill {
	cursor: pointer;
	scroll-margin: 0;
}

.karmalink-operator-wizard__pill-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.karmalink-operator-wizard__pill-text {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(36, 36, 41, 0.9);
	border: 1px solid rgba(248, 247, 245, 0.1);
	font-size: 13px;
	color: var(--kl-text-muted);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.karmalink-operator-wizard__pill-input:focus-visible + .karmalink-operator-wizard__pill-text {
	outline: 2px solid var(--kl-primary);
	outline-offset: 2px;
}

.karmalink-operator-wizard__pill-input:checked + .karmalink-operator-wizard__pill-text {
	border-color: rgba(140, 82, 255, 0.65);
	background: rgba(140, 82, 255, 0.35);
	color: var(--kl-text);
}

.karmalink-operator-wizard__pill.is-hidden {
	display: none;
}

.karmalink-operator-wizard__fieldset {
	border: none;
	margin: 0 0 20px;
	padding: 0;
}

.karmalink-operator-wizard__radio {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	cursor: pointer;
	font-size: 15px;
	color: var(--kl-text);
	font-family: "Be Vietnam Pro", sans-serif;
}

.karmalink-operator-wizard__radio input {
	accent-color: var(--kl-primary);
	width: 18px;
	height: 18px;
}

.karmalink-operator-wizard__legal {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.karmalink-operator-wizard__legal .karmalink-operator-wizard__legal-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.karmalink-operator-wizard__legal .karmalink-operator-wizard__legal-link:hover,
.karmalink-operator-wizard__legal .karmalink-operator-wizard__legal-link:focus-visible {
	color: var(--kl-secondary);
	text-decoration: none;
}

.karmalink-operator-wizard__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--kl-text-muted);
	cursor: pointer;
}

.karmalink-operator-wizard__check input {
	margin-top: 3px;
	accent-color: var(--kl-primary);
	flex-shrink: 0;
}

.karmalink-operator-wizard__required {
	color: var(--kl-primary);
	font-weight: 600;
	margin-right: 2px;
}

.karmalink-operator-wizard__nav-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	margin-bottom: 28px;
}

.karmalink-operator-wizard__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	font-family: "Be Vietnam Pro", sans-serif;
	cursor: pointer;
	transition: transform 0.2s ease;
}

/* Stili .karmalink-operator-wizard__btn--primary: karmalink-btn-primary.css */

.karmalink-operator-wizard__btn--ghost {
	background: transparent;
	color: var(--kl-text-muted);
	border: 1px solid rgba(248, 247, 245, 0.15);
}

/* hidden su submit / next: alcuni temi forzano display su button */
.karmalink-operator-wizard__btn--submit[hidden],
button[data-karmalink-wizard-submit][hidden],
button[data-karmalink-wizard-next][hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Mobile: una sola riga di step (niente wrap a 33%); testi e pallini più compatti */
@media (max-width: 600px) {
	.karmalink-operator-wizard__progress {
		margin-bottom: 18px;
	}

	.karmalink-operator-wizard__steps {
		flex-wrap: nowrap;
		gap: 0;
		justify-content: space-between;
	}

	.karmalink-operator-wizard__steps::before {
		left: 6px;
		right: 6px;
		top: 8px;
		height: 1px;
	}

	.karmalink-operator-wizard__step-dot {
		flex: 1 1 0;
		min-width: 0;
		gap: 4px;
	}

	.karmalink-operator-wizard__step-bubble {
		width: 16px;
		height: 16px;
		border-width: 1.5px;
	}

	.karmalink-operator-wizard__step-label {
		font-size: 6.5px;
		letter-spacing: 0.02em;
		line-height: 1.15;
		max-width: 100%;
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}