/* JCA — UI shortcodes (v1.0.0)
   Tutti gli elementi sono stylable via variabili CSS (vedi :root più sotto).
   Reset anti-tema con !important solo dove strettamente necessario (buttons). */

/* ----------------------------------------------------------------- */
/*  Font: forzatura Montserrat su tutti i wrapper JCA frontend.       */
/*  Selettore: classi che iniziano con "jca-" (sia primarie che       */
/*  combinate con spazio davanti, es. class="foo jca-progress-bar").  */
/*  Garantisce coerenza visiva indipendentemente dal tema attivo o    */
/*  dal contesto del widget Elementor che ospita lo shortcode.        */
/*  Eccezioni: debug panel (resta monospace) — vedi debug.css.        */
/* ----------------------------------------------------------------- */
[class^="jca-"]:not(.jca-debug-panel):not(.jca-profile-debug),
[class*=" jca-"]:not(.jca-debug-panel):not(.jca-profile-debug) {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

:root {
	--jca-fab-size: 80px;
	--jca-fab-bg: #00B5C4;
	--jca-fab-color: #fff;
	--jca-fab-border: transparent;
	--jca-fab-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	--jca-tq-color: #FF9F1C;
	--jca-tq-track: rgba(255, 255, 255, 0.18);
	--jca-tq-progress: 0;
	--jca-choice-bg: #f7f7f8;
	--jca-choice-color: #143A5A;
	--jca-choice-border: transparent;
	--jca-choice-bg-selected: #00B5C4;
	--jca-choice-color-selected: #fff;
	--jca-color-blue:   #1F5BA6;
	--jca-color-yellow: #F2C94C;
	--jca-color-red:    #C93A40;
	--jca-color-green:  #2E8B57;
}

/* ============================================================ */
/*  Icon generic                                                 */
/* ============================================================ */

.jca-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	color: currentColor;
	vertical-align: middle;
}
.jca-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ============================================================ */
/*  FAB (Floating Action Button) centrale                        */
/* ============================================================ */

.jca-fab {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--jca-fab-size) !important;
	height: var(--jca-fab-size) !important;
	padding: 0 !important;
	background: var(--jca-fab-bg) !important;
	color: var(--jca-fab-color) !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: var(--jca-fab-shadow) !important;
	cursor: pointer !important;
	font-family: inherit !important;
	line-height: 1 !important;
	text-decoration: none !important;
	position: relative !important;
	box-sizing: border-box !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
	outline: 0 !important;
}

.jca-fab:hover {
	transform: scale(1.04) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
	background: var(--jca-fab-bg) !important;
	color: var(--jca-fab-color) !important;
	border: 0 !important;
}
.jca-fab:focus-visible {
	box-shadow: var(--jca-fab-shadow), 0 0 0 4px rgba(0, 181, 196, 0.35) !important;
	outline: 0 !important;
	border: 0 !important;
}
.jca-fab:active {
	transform: scale(0.97) !important;
}

.jca-fab:disabled,
.jca-fab[aria-disabled="true"] {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: var(--jca-fab-shadow) !important;
}

/* FAB con scroll gate: stesso aspetto disabled finché l'utente non ha
   letto tutto il testo (scroll fino al fondo). */
.jca-fab-scroll-gated {
	pointer-events: none !important;
}

.jca-fab-icon-wrap {
	width: 40%;
	height: 40%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}
.jca-fab-icon-wrap .jca-icon { width: 100%; height: 100%; }

/* -----------------------------------------------------------------
   FAB "tap me" — opzione H: breathing glow.

   Implementazione: pseudo-elemento ::after stessa dimensione del FAB,
   centrato in alto, sotto il contenuto del FAB ma SOPRA lo sfondo
   della pagina. La box-shadow !important sul .jca-fab base impedisce
   di animare la shadow del FAB stesso, quindi animiamo il pseudo.

   Stacking: usiamo isolation: isolate sul FAB per creare uno stacking
   context locale. ::after a z-index 0 + figli a z-index 1. Niente
   z-index negativo (rischia di scivolare sotto al padre).

   Attivazione: PHP aggiunge .jca-fab-pulse al boot; JS aggiunge
   .is-pulsing dopo data-jca-pulse-delay ms (o subito dopo evento
   jca:fab-enabled per i FAB confirm).
   ----------------------------------------------------------------- */

.jca-fab.jca-fab-pulse {
	overflow: visible !important;
	isolation: isolate !important;
}

/* Tutti i figli diretti vanno sopra al glow.
   NB: non forziamo position:relative su TUTTI i figli — il timer ring SVG
   usa position:absolute + inset:0, e relative !important lo rompeva (lo
   buttava nel flow normale, spostandolo). Forziamo position solo dove serve
   (icon-wrap), e diamo z-index a tutti per stare sopra il glow ::after. */
.jca-fab.jca-fab-pulse > * {
	z-index: 1 !important;
}
.jca-fab.jca-fab-pulse > .jca-fab-icon-wrap {
	position: relative !important;
}
/* Il ring SVG resta absolute (inset:0) e sopra il glow */
.jca-fab.jca-fab-pulse > .jca-fab-timer-ring {
	position: absolute !important;
	z-index: 1 !important;
}

/* Pseudo glow (::after) — alone base che respira */
.jca-fab.jca-fab-pulse::after {
	content: '' !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	transform: translate(-50%, -50%) !important;
	background: transparent !important;
	pointer-events: none !important;
	z-index: 0 !important;
	border: 0 !important;
	box-shadow: 0 0 0 0 rgba(242, 169, 59, 0);
	/* Niente animation di default — solo quando .is-pulsing */
}

/* Onda radar (::before) — anello che si espande dal centro e svanisce */
.jca-fab.jca-fab-pulse::before {
	content: '' !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	transform: translate(-50%, -50%) scale(0.6) !important;
	background: transparent !important;
	border: 3px solid rgba(242, 169, 59, 0) !important;
	pointer-events: none !important;
	z-index: 0 !important;
	box-shadow: none !important;
	opacity: 0;
}

/* Glow attivo */
.jca-fab.jca-fab-pulse.is-pulsing::after {
	animation: jca-fab-pulse-breath 2.2s ease-in-out infinite !important;
}

/* Onda radar attiva — ciclo più breve e lineare → onde ravvicinate, flusso
   continuo senza buco percepibile tra una e l'altra */
.jca-fab.jca-fab-pulse.is-pulsing::before {
	animation: jca-fab-pulse-radar 1.6s linear infinite !important;
}

/* Pulse sull'icona interna: ZOOM + FADE.
   L'icona si ingrandisce fino a sfumare oltre il bordo del FAB, poi
   riparte piccola — effetto "vieni verso di me e scompare", richiamo forte.
   Sincronizzato con onda radar e glow (2.2s). */
.jca-fab.jca-fab-pulse.is-pulsing .jca-fab-icon-wrap,
.jca-fab.jca-fab-pulse.is-pulsing .jca-fab-label {
	animation: jca-fab-pulse-icon 2.2s ease-in-out infinite;
	transform-origin: center center;
}

@keyframes jca-fab-pulse-breath {
	0% {
		box-shadow:
			0 0 0 4px rgba(255, 255, 255, 0.40),
			0 0 18px 6px rgba(242, 169, 59, 0.55);
	}
	50% {
		box-shadow:
			0 0 0 8px rgba(255, 255, 255, 0.65),
			0 0 32px 12px rgba(242, 169, 59, 0.85);
	}
	100% {
		box-shadow:
			0 0 0 4px rgba(255, 255, 255, 0.40),
			0 0 18px 6px rgba(242, 169, 59, 0.55);
	}
}

@keyframes jca-fab-pulse-radar {
	0% {
		transform: translate(-50%, -50%) scale(0.7);
		border-color: rgba(242, 169, 59, 0.65);
		opacity: 0.85;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.7);
		border-color: rgba(242, 169, 59, 0);
		opacity: 0;
	}
}

@keyframes jca-fab-pulse-icon {
	0% {
		transform: scale(1);
		opacity: 0.85;
	}
	50% {
		transform: scale(1.35);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 0.85;
	}
}

/* Disabled o reduced motion: niente animazione, niente glow/radar */
.jca-fab:disabled.jca-fab-pulse::after,
.jca-fab[aria-disabled="true"].jca-fab-pulse::after,
.jca-fab.jca-fab-video-playing.jca-fab-pulse::after,
.jca-fab:disabled.jca-fab-pulse::before,
.jca-fab[aria-disabled="true"].jca-fab-pulse::before,
.jca-fab.jca-fab-video-playing.jca-fab-pulse::before {
	animation: none !important;
	box-shadow: none !important;
	opacity: 0 !important;
}

/* Icon-pulse: stesse condizioni di stop */
.jca-fab:disabled.jca-fab-pulse.is-pulsing .jca-fab-icon-wrap,
.jca-fab[aria-disabled="true"].jca-fab-pulse.is-pulsing .jca-fab-icon-wrap,
.jca-fab.jca-fab-video-playing.jca-fab-pulse.is-pulsing .jca-fab-icon-wrap,
.jca-fab:disabled.jca-fab-pulse.is-pulsing .jca-fab-label,
.jca-fab[aria-disabled="true"].jca-fab-pulse.is-pulsing .jca-fab-label,
.jca-fab.jca-fab-video-playing.jca-fab-pulse.is-pulsing .jca-fab-label {
	animation: none !important;
	transform: none !important;
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	.jca-fab.jca-fab-pulse.is-pulsing::after,
	.jca-fab.jca-fab-pulse.is-pulsing::before,
	.jca-fab.jca-fab-pulse.is-pulsing .jca-fab-icon-wrap,
	.jca-fab.jca-fab-pulse.is-pulsing .jca-fab-label {
		animation: none !important;
	}
	.jca-fab.jca-fab-pulse.is-pulsing::before {
		opacity: 0 !important;
	}
	.jca-fab.jca-fab-pulse.is-pulsing .jca-fab-icon-wrap,
	.jca-fab.jca-fab-pulse.is-pulsing .jca-fab-label {
		transform: none !important;
		opacity: 1 !important;
	}
	.jca-fab.jca-fab-pulse.is-pulsing::after {
		box-shadow:
			0 0 0 4px rgba(255, 255, 255, 0.40),
			0 0 18px 6px rgba(242, 169, 59, 0.55) !important;
	}
}

/* FAB resume: usa l'icona PNG come bitmap (no currentColor). Stile FAB invariato. */
.jca-fab-resume .jca-fab-icon-wrap {
	width: 90%;
	height: 90%;
}
.jca-fab-resume-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ============================================================ */
/*  FAB Timer — countdown + ring SVG progressivo                  */
/* ============================================================ */

/* Numero countdown: arancione, centrato sopra il ring */
.jca-fab-countdown {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: calc(var(--jca-fab-size) * 0.32);
	font-weight: 700;
	color: var(--jca-tq-color) !important;
	z-index: 2;
	line-height: 1;
}

/* Nascondi eventuale icon-wrap quando il FAB è in stato timer */
.jca-fab-timer .jca-fab-icon-wrap,
.jca-fab-timer_multi .jca-fab-icon-wrap {
	opacity: 0;
}

/* Il FAB timer NON ha opacità ridotta nemmeno se disabled (è decorativo) */
.jca-fab-timer[disabled],
.jca-fab-timer[aria-disabled="true"],
.jca-fab-timer_multi[disabled],
.jca-fab-timer_multi[aria-disabled="true"] {
	opacity: 1 !important;
	cursor: default !important;
}

/* timer_multi: il FAB mostra il bg pieno (come Next), il ring viaggia sopra */
.jca-fab-timer_multi {
	--jca-tq-track: rgba(255, 255, 255, 0.25);
}
.jca-fab-timer_multi .jca-fab-countdown {
	color: #fff !important;
}

/* Ring SVG di progresso, sovrapposto al FAB. Non blocca i click. */
.jca-fab-timer-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
	z-index: 1;
	overflow: visible;
}

.jca-fab-timer-ring-track {
	fill: none;
	stroke: var(--jca-tq-track);
	stroke-width: 6;
}

/* Cerchio di riempimento. Circonferenza = 2 * π * r = 2 * π * 46 ≈ 289.027 */
.jca-fab-timer-ring-fill {
	fill: none;
	stroke: var(--jca-tq-color);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 289.027;
	stroke-dashoffset: calc(289.027 * (1 - var(--jca-tq-progress, 0)));
	transition: stroke-dashoffset 1s linear;
}

/* ============================================================ */
/*  Progress Ring                                                */
/* ============================================================ */

.jca-progress-ring {
	display: inline-block;
	vertical-align: middle;
	color: var(--jca-accent, #00B5C4);
}

.jca-progress-ring-bar {
	transition: stroke-dashoffset 0.6s ease;
}

/* ============================================================ */
/*  Choice button                                                */
/* ============================================================ */

.jca-choice {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 14px 18px !important;
	background: var(--jca-choice-bg) !important;
	color: var(--jca-choice-color) !important;
	border: 2px solid var(--jca-choice-border) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	min-height: 52px !important;
	box-sizing: border-box !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
	outline: 0 !important;
	width: auto;
}

.jca-choice:hover {
	background: rgba(0, 181, 196, 0.08) !important;
	border-color: rgba(0, 181, 196, 0.3) !important;
	color: var(--jca-choice-color) !important;
}

.jca-choice:focus-visible {
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(0, 181, 196, 0.35) !important;
}

.jca-choice[aria-pressed="true"] {
	background: var(--jca-choice-bg-selected) !important;
	color: var(--jca-choice-color-selected) !important;
	border-color: var(--jca-choice-bg-selected) !important;
	transform: scale(1.02) !important;
}

/*
 * Variants per profilo (OPT-IN).
 * Di default i bottoni scelta NON rivelano l'archetipo: l'utente non deve
 * sapere quale risposta corrisponde a quale profilo. Tutti i bottoni selezionati
 * sono visivamente identici.
 *
 * Se serve visualizzare il colore (es. Typology Reveal, debug) aggiungi
 * class="jca-show-profile" allo shortcode. Esempio:
 *   [jca_choice class="jca-show-profile" profile="blue" ...]
 */
.jca-choice.jca-show-profile.jca-choice-profile-blue[aria-pressed="true"]   { background: var(--jca-color-blue)   !important; border-color: var(--jca-color-blue)   !important; }
.jca-choice.jca-show-profile.jca-choice-profile-yellow[aria-pressed="true"] { background: var(--jca-color-yellow) !important; border-color: var(--jca-color-yellow) !important; color: #1d2327 !important; }
.jca-choice.jca-show-profile.jca-choice-profile-red[aria-pressed="true"]    { background: var(--jca-color-red)    !important; border-color: var(--jca-color-red)    !important; }
.jca-choice.jca-show-profile.jca-choice-profile-green[aria-pressed="true"]  { background: var(--jca-color-green)  !important; border-color: var(--jca-color-green)  !important; }

/* ============================================================ */
/*  Back / Logout link                                           */
/* ============================================================ */

.jca-back,
.jca-logout-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 8px 12px !important;
	background: transparent !important;
	color: inherit !important;
	border: 0 !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer !important;
	opacity: 0.85 !important;
	transition: opacity 0.15s ease !important;
	outline: 0 !important;
	min-height: 36px !important;
}
.jca-back:hover,
.jca-logout-link:hover {
	opacity: 1 !important;
	background: transparent !important;
	color: inherit !important;
	border: 0 !important;
	text-decoration: none !important;
}
.jca-back:focus-visible,
.jca-logout-link:focus-visible {
	outline: 0 !important;
	box-shadow: 0 0 0 2px rgba(0, 181, 196, 0.35) !important;
	border-radius: 6px !important;
}

.jca-back .jca-icon,
.jca-logout-link .jca-icon {
	width: 16px;
	height: 16px;
}

/* ============================================================ */
/*  Avatar                                                        */
/* ============================================================ */

.jca-avatar-link {
	display: inline-block !important;
	line-height: 0 !important;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: none !important;
}
.jca-avatar-link:focus-visible {
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(0, 181, 196, 0.35) !important;
	border-radius: 50%;
}

.jca-avatar {
	display: inline-block;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: #e5e5e5;
	vertical-align: middle;
	overflow: hidden;
	position: relative;
}
.jca-avatar-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #00B5C4 0%, #008a95 100%);
	color: #fff;
	font-weight: 700;
	font-family: inherit;
}
.jca-avatar-initial {
	font-size: 42%;
	line-height: 1;
	display: block;
}

/* ============================================================ */
/*  Score badge                                                   */
/* ============================================================ */

.jca-score-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: var(--jca-score-badge-color, #F5A623);   /* arancione dorato per il numero */
	vertical-align: middle;
}
.jca-score-badge .jca-icon {
	width: 1em;    /* si scala col font-size */
	height: 1em;
	color: var(--jca-score-badge-star-color, #F5B400); /* giallo stella */
	flex-shrink: 0;
}
.jca-score-badge-value {
	line-height: 1;
}

/* ============================================================ */
/*  FAB label (es. "GO" senza icona)                             */
/* ============================================================ */

.jca-fab .jca-fab-label {
	font-size: calc(var(--jca-fab-size) * 0.28);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
}

/* ============================================================ */
/*  FAB timer — stato expired                                    */
/* ============================================================ */

.jca-fab-countdown {
	font-variant-numeric: tabular-nums;
}
.jca-fab-timer-expired {
	filter: grayscale(0.6);
}
.jca-fab-timer-expired .jca-fab-timer-ring-fill {
	stroke: var(--jca-color-red);
}
.jca-fab-timer-expired .jca-fab-countdown {
	color: var(--jca-color-red) !important;
}

/* ============================================================ */
/*  Choice — feedback timer mode (corretto/sbagliato)            */
/* ============================================================ */

.jca-choice-correct {
	background: #2E8B57 !important;   /* verde */
	color: #fff !important;
	border-color: #2E8B57 !important;
}
.jca-choice-wrong {
	background: #C93A40 !important;   /* rosso */
	color: #fff !important;
	border-color: #C93A40 !important;
}
/* Evidenzia la risposta corretta quando l'utente ha sbagliato o è scaduto il timer */
.jca-choice-correct-hint {
	outline: 3px solid #2E8B57 !important;
	outline-offset: 2px !important;
}

/* ============================================================ */
/*  FAB video states (play/pause/ready transform)                */
/* ============================================================ */

/* Mentre il video sta andando, nessuna animation particolare */
.jca-fab-video-playing { }

/* Video in pausa → sottile fade */
.jca-fab-video-paused {
	opacity: 0.85;
}

/* A fine video → pulse per attirare l'attenzione sul next */
.jca-fab-video-ready {
	animation: jca-fab-ready-pulse 1s ease-out 2;
}
@keyframes jca-fab-ready-pulse {
	0%   { box-shadow: var(--jca-fab-shadow), 0 0 0 0 rgba(0, 181, 196, 0.6); }
	100% { box-shadow: var(--jca-fab-shadow), 0 0 0 20px rgba(0, 181, 196, 0); }
}

/* ============================================================ */
/*  Nascondi play button e timeline nativi del video HTML5       */
/*  (solo dentro una schermata JCA con FAB video)                */
/* ============================================================ */

/* Webkit (Chrome, Safari, Edge) */
body.jca-screen-has-video video::-webkit-media-controls-play-button,
body.jca-screen-has-video video::-webkit-media-controls-timeline {
	display: none !important;
}

/* ============================================================ */
/*  Replay overlay sopra il video (appare a fine video)          */
/* ============================================================ */

.jca-video-replay {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) scale(0.9) !important;
	width: 72px !important;
	height: 72px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.95) !important;
	color: #143A5A !important;
	border: 0 !important;
	cursor: pointer !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
	opacity: 0 !important;
	transition: opacity 0.3s ease, transform 0.3s ease !important;
	z-index: 10 !important;
	padding: 0 !important;
}
.jca-video-replay.is-visible {
	display: flex !important;
	opacity: 1 !important;
	transform: translate(-50%, -50%) scale(1) !important;
}
.jca-video-replay:hover {
	background: #ffffff !important;
	transform: translate(-50%, -50%) scale(1.08) !important;
}
.jca-video-replay svg {
	width: 32px;
	height: 32px;
}

/* ============================================================ */
/*  Black overlay — copre il video prima del primo play          */
/* ============================================================ */

.jca-video-black-overlay {
	position: absolute;
	inset: 0;
	background: #000;
	z-index: 5;
	pointer-events: none;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.jca-video-black-overlay.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* ============================================================ */
/*  Mobile: video sempre in proporzioni originali (no crop)      */
/*  - il <video> mantiene proporzioni (object-fit:contain)      */
/*  - fasce nere sopra/sotto (letterbox) quando serve            */
/* ============================================================ */

@media (max-width: 1024px) {
	.e-hosted-video.elementor-wrapper,
	.e-hosted-video.elementor-wrapper.elementor-open-inline,
	.elementor-widget-video .elementor-wrapper,
	.elementor-widget-video .e-hosted-video,
	.jca-video-wrap {
		background-color: #000 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		overflow: hidden !important;
	}
	/* Il video/iframe mantiene SEMPRE le proporzioni originali, centrato,
	   con fasce nere sopra/sotto o ai lati. Niente crop. */
	.e-hosted-video.elementor-wrapper video,
	.e-hosted-video.elementor-wrapper.elementor-open-inline video,
	.elementor-widget-video .elementor-wrapper video,
	.elementor-widget-video video,
	.elementor-widget-video iframe,
	.jca-video-wrap video {
		width: 100% !important;
		height: auto !important;
		max-height: 100% !important;
		object-fit: contain !important;
		background: #000 !important;
		margin: 0 auto !important;
	}
}

/* ============================================================ */
/*  [jca_score] — tachimetro animato                             */
/* ============================================================ */

/* ============================================================ */
/*  [jca_score] — score con effetto videogioco                   */
/* ============================================================ */

.jca-score {
	display: inline-block;
	position: relative;
	font-variant-numeric: tabular-nums;   /* larghezze uguali per evitare jitter */
	font-weight: 700;
	color: #F5A623;
	transition: transform 0.15s cubic-bezier(.34, 1.56, .64, 1), color 0.2s ease, text-shadow 0.2s ease;
	transform-origin: center center;
}

/* Stato durante l'animazione: glow giallo + scale aggressivo */
.jca-score-animating {
	color: #FFD166;
	transform: scale(1.45);
	text-shadow:
		0 0 8px rgba(255, 209, 102, 0.95),
		0 0 18px rgba(245, 166, 35, 0.7),
		0 0 30px rgba(245, 166, 35, 0.4);
	animation: jca-score-shake 0.45s ease-in-out;
}

/* Bounce finale dopo che il numero ha raggiunto il valore target */
.jca-score-animated {
	animation: jca-score-bounce 0.55s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes jca-score-shake {
	0%, 100% { transform: scale(1.45) translateX(0); }
	20%      { transform: scale(1.45) translateX(-3px) rotate(-2deg); }
	40%      { transform: scale(1.45) translateX(3px)  rotate(2deg); }
	60%      { transform: scale(1.45) translateX(-2px) rotate(-1deg); }
	80%      { transform: scale(1.45) translateX(2px)  rotate(1deg); }
}

@keyframes jca-score-bounce {
	0%   { transform: scale(1.45); }
	30%  { transform: scale(0.85); }
	60%  { transform: scale(1.18); }
	100% { transform: scale(1); }
}

/* Delta pop: "+10" che fluttua verso l'alto e svanisce */
.jca-score-delta {
	position: absolute;
	left: 100%;
	top: 50%;
	margin-left: 8px;
	transform: translateY(-50%);
	font-size: 0.85em;
	font-weight: 800;
	color: #4ADE80;            /* verde brillante per delta positivo */
	text-shadow:
		0 0 6px rgba(74, 222, 128, 0.9),
		0 0 14px rgba(74, 222, 128, 0.5);
	pointer-events: none;
	white-space: nowrap;
	opacity: 0;
	animation: jca-score-delta-float 1.4s cubic-bezier(.22, 1, .36, 1) forwards;
	z-index: 5;
}

.jca-score-delta--negative {
	color: #F87171;
	text-shadow:
		0 0 6px rgba(248, 113, 113, 0.9),
		0 0 14px rgba(248, 113, 113, 0.5);
}

@keyframes jca-score-delta-float {
	0%   { opacity: 0; transform: translateY(-50%) scale(0.6); }
	15%  { opacity: 1; transform: translateY(-90%) scale(1.25); }
	35%  { opacity: 1; transform: translateY(-110%) scale(1); }
	100% { opacity: 0; transform: translateY(-220%) scale(0.95); }
}

/* Riduce le animazioni per chi ha prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.jca-score-animating,
	.jca-score-animated,
	.jca-score-delta {
		animation: none !important;
	}
	.jca-score-animating { transform: none; text-shadow: none; }
	.jca-score-delta     { opacity: 1; transform: translateY(-50%); }
}

/* ============================================================ */
/*  [jca_progress_bar] — barra orizzontale                       */
/* ============================================================ */

.jca-progress-bar {
	display: block;
	width: 100%;
	min-width: 120px;
	box-sizing: border-box;
	color: #fff;
	--jca-pb-track: rgba(255,255,255,0.25);
	--jca-pb-fill: #F5A623;
}
.jca-progress-bar .jca-progress-bar-name {
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 6px;
	color: inherit;
}
.jca-progress-bar .jca-progress-bar-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
}
.jca-progress-bar .jca-progress-bar-track {
	flex: 1 1 auto !important;
	min-width: 50px !important;
	min-height: 8px;
	background-color: var(--jca-pb-track) !important;
	border-radius: 999px;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	display: block !important;
}
/* Larghezza esplicita via attributo width: il track non si allarga più */
.jca-progress-bar--fixed-width .jca-progress-bar-track {
	flex: 0 0 auto !important;
	max-width: 100%;
}
.jca-progress-bar .jca-progress-bar-fill {
	display: block;
	height: 100%;
	min-height: 8px;
	background-color: var(--jca-pb-fill) !important;
	border-radius: inherit;
	transition: width 0.6s ease;
}
.jca-progress-bar .jca-progress-bar-label {
	font-weight: 700;
	font-size: 0.9rem;
	color: inherit;
	flex-shrink: 0;
	min-width: 2.5em;
	text-align: right;
	white-space: nowrap;
}
/* Stato "spento": nessun avanzamento su questo scope */
.jca-progress-bar--inactive {
	opacity: 0.6;
}
.jca-progress-bar--inactive .jca-progress-bar-label {
	opacity: 0.8;
}

/* ============================================================ */
/*  [jca_block_score icon="star"]                                */
/* ============================================================ */

.jca-block-score {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}
.jca-block-score-icon {
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
}
.jca-block-score-icon svg {
	width: 100%;
	height: 100%;
}

/* ============================================================ */
/*  Avatar utente (upload + display)                             */
/* ============================================================ */

.jca-user-avatar {
	display: block;
	max-width: 100%;
	height: auto;
}

.jca-avatar-uploader {
	display: flex;
	align-items: center;
	gap: 16px;
}
.jca-avatar-preview {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 2px solid rgba(255,255,255,0.1);
}
.jca-avatar-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jca-avatar-preview .jca-avatar-placeholder {
	width: 48px;
	height: 48px;
	color: rgba(255,255,255,0.4);
}
.jca-avatar-preview .jca-avatar-placeholder svg {
	width: 100%;
	height: 100%;
}
.jca-avatar-controls {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
.jca-avatar-status {
	font-size: 0.85rem;
	min-height: 1.2em;
}
.jca-avatar-status[data-state="error"] {
	color: #C93A40;
}
.jca-avatar-status[data-state="pending"] {
	color: rgba(255,255,255,0.6);
}

/* === Layout "icons": avatar centrato con 2 iconcine sotto === */
.jca-avatar-uploader--icons {
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.jca-avatar-uploader--icons .jca-avatar-controls {
	flex-direction: row;
	gap: 14px;
	align-items: center;
	justify-content: center;
}
.jca-avatar-icon-btn,
.jca-avatar-uploader--icons .jca-avatar-icon-btn {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #fff;
	cursor: pointer;
	padding: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	opacity: 0.75;
	transition: opacity 0.15s ease, background 0.15s ease;
	font-size: 16px;  /* per FA: <i> eredita */
	line-height: 1;
}
.jca-avatar-icon-btn:hover,
.jca-avatar-uploader--icons .jca-avatar-icon-btn:hover {
	opacity: 1;
	background: rgba(255,255,255,0.15) !important;
	background-color: rgba(255,255,255,0.15) !important;
}
.jca-avatar-icon-btn[hidden] {
	display: none !important;
}
.jca-avatar-icon-btn svg {
	width: 16px;
	height: 16px;
}
.jca-avatar-icon-btn i { font-size: 16px; }

/* Etichetta opzionale accanto all'icona (show_label="yes") */
.jca-avatar-icon-btn-label {
	display: inline-flex;
	align-items: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #E3E351;
	margin-left: 6px;
	line-height: 1;
}
.jca-avatar-icon-btn:has(.jca-avatar-icon-btn-label) {
	border-radius: 999px;
	padding: 6px 12px 6px 8px;
	opacity: 1;
}

/* ============================================================ */
/*  Default text colors on dark backgrounds (override in theme) */
/* ============================================================ */

.jca-profile-name,
.jca-profile-description,
.jca-progress-bar-label,
.jca-block-name,
.jca-block-percent,
.jca-user-name,
.jca-user-field { color: #fff; }

/* Label dati utente (usata con <span class="jca-user-label">Username:</span> in Elementor) */
.jca-user-label {
	color: #E3E351;
	font-weight: 700;
	display: inline-block;
	min-width: 110px;
}

/* ============================================================ */
/*  [jca_archetype_card] — card con immagine sx + testo dx     */
/* ============================================================ */

.jca-archetype-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 24px;
	color: #fff;
	width: 100%;
	box-sizing: border-box;
}
.jca-archetype-card-img {
	flex: 0 0 auto;
	width: 100px;
	max-width: 100px;
}
.jca-archetype-card-img img {
	width: 100%;
	height: auto;
	display: block;
}
.jca-archetype-card-body {
	flex: 1 1 0;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.jca-archetype-card-name {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 8px 0;
	line-height: 1.2;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.jca-archetype-card-name--blue   { color: #1F5BA6; }
.jca-archetype-card-name--yellow { color: #F2C94C; }
.jca-archetype-card-name--red    { color: #C93A40; }
.jca-archetype-card-name--green  { color: #2E8B57; }
.jca-archetype-card-description {
	color: #fff;
	line-height: 1.5;
}

/* Mobile: layout più compatto ma sempre flex orizzontale */
@media (max-width: 600px) {
	.jca-archetype-card {
		gap: 14px;
		margin-bottom: 20px;
	}
	.jca-archetype-card-img {
		width: 64px;
		max-width: 64px;
	}
	.jca-archetype-card-name {
		font-size: 1.25rem;
		margin-bottom: 6px;
	}
	.jca-archetype-card-description {
		font-size: 0.95rem;
		line-height: 1.45;
	}
}

/* Schermi davvero stretti (popup molto piccoli, viewport <380px) */
@media (max-width: 380px) {
	.jca-archetype-card {
		gap: 10px;
	}
	.jca-archetype-card-img {
		width: 52px;
		max-width: 52px;
	}
	.jca-archetype-card-name {
		font-size: 1.1rem;
	}
	.jca-archetype-card-description {
		font-size: 0.9rem;
	}
}

/* ============================================================ */
/*  [jca_archetype_quiz] — 4 bottoni archetipo                  */
/* ============================================================ */

.jca-archetype-quiz {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 600px;
	margin: 0 auto;
}
@media (min-width: 600px) {
	.jca-archetype-quiz {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
}

/* ============================================================ */
/*  Audio toggle button                                          */
/* ============================================================ */

.jca-audio-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jca-audio-icon-size, 28px);
	height: var(--jca-audio-icon-size, 28px);
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	color: inherit;
	line-height: 1;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: opacity 0.15s ease, transform 0.1s ease;
}
.jca-audio-toggle:hover,
.jca-audio-toggle:focus,
.jca-audio-toggle:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	opacity: 0.7;
}
.jca-audio-toggle:active { transform: scale(0.92); }
.jca-audio-toggle:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px;
	border-radius: 4px;
}
.jca-audio-toggle .jca-audio-icon {
	display: inline-flex;
	width: 100%;
	height: 100%;
}
.jca-audio-toggle .jca-audio-icon svg {
	width: 100%;
	height: 100%;
}
/* Stato ON: mostra icona-on, nascondi icona-off */
.jca-audio-toggle .jca-audio-icon-off { display: none; }
.jca-audio-toggle.is-off .jca-audio-icon-on  { display: none; }
.jca-audio-toggle.is-off .jca-audio-icon-off { display: inline-flex; }
.jca-audio-toggle.is-off { opacity: 0.6; }