/* ===================================================================
 * Upgrade Audio – stili
 * Theme: nero/scuro con accent verde lime (#C6F542).
 * - Lista My Account
 * - Player "rich" (My Account)
 * - Demo player (pagina prodotto)
 * - Survey + raccomandazioni
 * =================================================================== */

:root {
	--ua-accent: #C6F542;
	--ua-accent-hover: #D4FA5E;
	--ua-accent-rgb: 198, 245, 66;
	--ua-on-accent: #0a0a0a;
	--ua-bg-dark: #0a0a0a;
	--ua-bg-dark-2: #1a1a1d;
	--ua-text-light: #fafafa;
	--ua-text-muted: #b3b3b6;
	--ua-track: #2a2a2e;
}

.ua-account {
	margin: 0 0 1.5em;
}

/* ============= Widget riepilogo in Dashboard My Account ============= */
.ua-dashboard-widget {
	margin: 0 0 2em;
	padding: 20px;
	background: var(--ua-bg-dark-2);
	border-radius: 12px;
}
.ua-dashboard-widget-title {
	margin: 0 0 14px;
	color: var(--ua-text-light);
	font-size: 1.15em;
}
.ua-dashboard-widget-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ua-dashboard-widget-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--ua-bg-dark);
	border-radius: 10px;
	padding: 12px 14px;
}
.ua-dashboard-widget-thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ua-track);
}
.ua-dashboard-widget-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ua-dashboard-widget-thumb-ph {
	color: var(--ua-text-muted);
	font-size: 1.4em;
}
.ua-dashboard-widget-body {
	flex: 1 1 auto;
	min-width: 0;
}
.ua-dashboard-widget-name {
	margin: 0 0 4px;
	font-size: 1em;
	color: var(--ua-text-light);
}
.ua-dashboard-widget-quiz {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.ua-dashboard-widget-state {
	font-size: 0.88em;
	color: var(--ua-text-muted);
}
.ua-dashboard-widget-state.ua-state-ready {
	color: var(--ua-accent);
	font-weight: 600;
}
.ua-dashboard-widget-state.ua-state-done {
	color: var(--ua-accent);
}
.ua-dashboard-widget-btn {
	display: inline-block;
	background: var(--ua-accent);
	color: var(--ua-on-accent);
	font-weight: 700;
	font-size: 0.85em;
	padding: 4px 12px;
	border-radius: 999px;
	text-decoration: none;
}
.ua-dashboard-widget-btn:hover {
	background: var(--ua-accent-hover);
}
.ua-dashboard-widget-actions {
	flex: 0 0 auto;
}
@media (max-width: 480px) {
	.ua-dashboard-widget-item {
		flex-wrap: wrap;
	}
	.ua-dashboard-widget-actions {
		width: 100%;
	}
	.ua-dashboard-widget-actions .button {
		width: 100%;
		text-align: center;
	}
}

/* ============= Voci "I miei audio" / "Quiz" in evidenza nel menu My Account ============= */
.woocommerce-MyAccount-navigation-link--audio a,
.woocommerce-MyAccount-navigation-link--quiz a {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	background: var(--ua-accent);
	color: var(--ua-on-accent) !important;
	border-radius: 999px;
	padding: 10px 18px;
	margin: 0 0 6px;
}
.woocommerce-MyAccount-navigation-link--audio a:hover,
.woocommerce-MyAccount-navigation-link--quiz a:hover {
	background: var(--ua-accent-hover);
}
.woocommerce-MyAccount-navigation-link--audio a::before {
	content: "🎧";
}
.woocommerce-MyAccount-navigation-link--quiz a::before {
	content: "📝";
}
.woocommerce-MyAccount-navigation-link--audio.is-active a,
.woocommerce-MyAccount-navigation-link--quiz.is-active a {
	background: var(--ua-bg-dark);
	color: var(--ua-accent) !important;
}

.ua-error {
	background: #fdecea;
	border-left: 4px solid #b32d2e;
	padding: 12px 16px;
}

/* ============= Lista My Account ============= */
.ua-audio-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ua-audio-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #e5e5e5;
}
.ua-audio-item--expired { opacity: 0.65; }
.ua-audio-thumb {
	width: 64px; height: 64px;
	object-fit: cover; border-radius: 6px; flex-shrink: 0;
}
.ua-audio-thumb--placeholder {
	display: flex; align-items: center; justify-content: center;
	font-size: 28px; background: #f0f0f0; color: #999;
}
.ua-audio-meta { flex: 1 1 auto; min-width: 0; }
.ua-audio-title { margin: 0 0 4px; font-size: 1.05em; line-height: 1.3; }
.ua-audio-meta span { display: inline-block; margin-right: 12px; color: #555; font-size: 0.9em; }
.ua-audio-resume { color: var(--ua-accent) !important; font-weight: 600; }
.ua-audio-expires { color: #777 !important; }
.ua-audio-item--expired .ua-audio-expires { color: #b32d2e !important; }
.ua-audio-actions { flex-shrink: 0; }
@media (max-width: 600px) {
	.ua-audio-item { flex-wrap: wrap; }
	.ua-audio-actions { width: 100%; }
}

/* ============= Player page wrapper ============= */
.ua-player-page {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}
.ua-back { margin-bottom: 14px; }
.ua-back a { text-decoration: none; color: #555; font-size: 0.9em; }

/* ============= Player "rich" My Account (theme red/black) ============= */
.ua-player--rich {
	background: rgba(18, 24, 38, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	color: var(--ua-text-light);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 20px;
	padding: 35px;
	max-width: 390px;
	margin: 0 auto;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.ua-player--rich:focus { outline: none; }
.ua-player--rich .ua-player-audio { display: none; }

/* Cover */
.ua-player-cover {
	width: 100%;
	max-width: 300px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 22px;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	background: var(--ua-bg-dark-2);
}
.ua-player-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ua-player-cover-placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #2a2a2e, #0f0f10);
	color: #4a4a50; font-size: 88px; line-height: 1;
}

/* Titolo + scadenza */
.ua-player--rich .ua-player-info {
	text-align: center;
	margin-bottom: 25px;
}
.ua-player--rich .ua-player-title {
	color: #fff;
	font-size: 1.25em;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.25;
}
.ua-player--rich .ua-player-expires {
	color: var(--ua-text-muted);
	font-size: 0.82em; margin: 0;
}

/* Progress bar — barra a DIV (niente input range: nessun conflitto col tema) */
.ua-player--rich .ua-player-progress {
	display: block !important;
	margin-bottom: 22px !important;
}
.ua-player--rich .ua-time-info {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 9px !important;
}
.ua-player--rich .ua-time {
	color: var(--ua-text-muted) !important;
	font-size: 0.78em !important;
	font-variant-numeric: tabular-nums !important;
	line-height: 1 !important;
	min-width: 0 !important;
}
.ua-player--rich .ua-time-current { color: #fff !important; font-weight: 500 !important; }

.ua-player--rich .ua-progress-bar {
	position: relative !important;
	width: 100% !important;
	height: 6px !important;
	background: rgba(255, 255, 255, 0.18) !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	touch-action: none !important;
}
.ua-player--rich .ua-progress-fill {
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	height: 100% !important;
	width: 0%;
	background: var(--ua-accent) !important;
	border-radius: 3px !important;
	pointer-events: none !important;
}
.ua-player--rich .ua-progress-handle {
	position: absolute !important;
	top: 50% !important;
	left: 0%;
	width: 14px !important; height: 14px !important;
	margin-left: -7px !important;
	transform: translateY(-50%) scale(0) !important;
	background: #fff !important;
	border: 2px solid var(--ua-accent) !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
	transition: transform 120ms ease !important;
	pointer-events: none !important;
}
/* handle segue il fill */
.ua-player--rich .ua-progress-handle { left: var(--handle, 0%); }
.ua-player--rich .ua-progress-bar:hover .ua-progress-handle,
.ua-player--rich .ua-progress-bar:focus .ua-progress-handle,
.ua-player--rich .ua-progress-bar:active .ua-progress-handle {
	transform: translateY(-50%) scale(1) !important;
}
.ua-player--rich .ua-progress-bar:focus-visible {
	outline: 2px solid var(--ua-accent) !important;
	outline-offset: 4px !important;
}

/* Bottoni principali */
.ua-player-buttons {
	display: flex; align-items: center; justify-content: center;
	gap: 20px; margin-bottom: 8px;
}
.ua-player--rich .ua-btn {
	background: transparent !important;
	border: none !important;
	color: #fff !important;
	cursor: pointer;
	padding: 10px !important;
	border-radius: 50% !important;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: none !important;
	transition: color 200ms ease, transform 200ms ease, background 200ms ease;
}
.ua-player--rich .ua-btn-skip:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	transform: scale(1.1);
}
.ua-player--rich .ua-btn:focus-visible {
	outline: 2px solid var(--ua-accent);
	outline-offset: 4px;
}
.ua-btn-skip { width: 52px; height: 52px; }

.ua-player--rich .ua-btn-play {
	width: 60px; height: 60px;
	padding: 0 !important;
	background: var(--ua-accent) !important;
	color: var(--ua-on-accent) !important;
	border-radius: 50% !important;
	box-shadow: 0 5px 15px rgba(var(--ua-accent-rgb), 0.4) !important;
}
.ua-player--rich .ua-btn-play:hover {
	background: var(--ua-accent-hover) !important;
	color: var(--ua-on-accent) !important;
	transform: scale(1.05);
	box-shadow: 0 8px 25px rgba(var(--ua-accent-rgb), 0.6) !important;
}
.ua-btn-play .ua-icon-pause { display: none; }
.ua-player.is-playing .ua-btn-play .ua-icon-play { display: none; }
.ua-player.is-playing .ua-btn-play .ua-icon-pause { display: inline-block; }

/* Riga extra */
.ua-player--rich .ua-player-extra {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ua-player--rich .ua-btn-text {
	background: transparent; border: none;
	color: var(--ua-text-muted); cursor: pointer;
	font-size: 0.85em; padding: 4px 6px;
	transition: color 120ms ease;
	display: inline-flex; align-items: center;
}
.ua-player--rich .ua-btn-text:hover { color: #fff; }
.ua-player--rich .ua-player-speed {
	display: inline-flex; align-items: center;
	gap: 8px; color: var(--ua-text-muted); font-size: 0.85em;
}
.ua-player--rich .ua-speed-label { font-size: 0.85em; }
.ua-player--rich .ua-speed-select {
	background: var(--ua-bg-dark-2); color: var(--ua-text-light);
	border: 1px solid #2a2a2e; border-radius: 4px;
	padding: 4px 8px; font-size: 0.85em;
	min-width: 70px; cursor: pointer;
}
.ua-player--rich .ua-player-status {
	display: block; text-align: center;
	color: var(--ua-accent); font-size: 0.78em;
	margin-top: 8px; min-height: 1em;
}

/* Mobile main player */
@media (max-width: 520px) {
	.ua-player--rich {
		padding: 22px 18px 18px;
		border-radius: 14px;
	}
	.ua-player-cover { width: 200px; height: 200px; }
	.ua-player-buttons { gap: 16px; }
	.ua-btn-play { width: 56px; height: 56px; }
	.ua-btn-skip { width: 40px; height: 40px; }
	.ua-btn-skip svg { width: 28px; height: 28px; }
	.ua-player--rich .ua-player-title { font-size: 1.1em; }
}

/* ============= Survey + raccomandazioni ============= */
.ua-player-survey {
	color: var(--ua-text-light);
	padding: 4px 4px 0;
}
.ua-loading {
	text-align: center; color: var(--ua-text-muted);
	padding: 32px 0; font-size: 0.9em;
}
.ua-survey-title {
	color: #fff; font-size: 1.2em; margin: 0 0 6px; text-align: center;
}
.ua-survey-intro {
	color: var(--ua-text-muted); font-size: 0.88em;
	text-align: center; margin: 0 0 18px; line-height: 1.4;
}
.ua-survey-q { margin-bottom: 18px; }
.ua-survey-q-text {
	color: #fff; font-size: 0.95em; font-weight: 600;
	margin: 0 0 8px; line-height: 1.35;
}
.ua-survey-options { display: flex; flex-direction: column; gap: 6px; }
.ua-survey-option {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
	color: #d8d8da; font-size: 0.9em;
}
.ua-survey-option:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(var(--ua-accent-rgb), 0.5);
}
.ua-survey-option input[type="radio"] {
	accent-color: var(--ua-accent); margin: 0; flex-shrink: 0;
}
.ua-survey-option input[type="radio"]:checked + span {
	color: #fff; font-weight: 500;
}
.ua-survey-q-free textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px; padding: 10px;
	color: var(--ua-text-light); font-size: 0.9em;
	font-family: inherit; resize: vertical; min-height: 60px;
}
.ua-survey-q-free textarea:focus { outline: none; border-color: var(--ua-accent); }
.ua-survey-q-free textarea::placeholder { color: #707074; }

.ua-survey-actions {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-top: 18px;
}
.ua-survey-skip {
	background: transparent; border: none; color: var(--ua-text-muted);
	cursor: pointer; font-size: 0.85em; padding: 8px 12px;
	transition: color 120ms ease;
}
.ua-survey-skip:hover { color: #fff; }
.ua-survey-submit {
	background: var(--ua-accent); color: var(--ua-on-accent); border: none;
	border-radius: 24px; padding: 10px 22px;
	font-size: 0.9em; font-weight: 700; cursor: pointer;
	transition: background 120ms ease, transform 120ms ease;
}
.ua-survey-submit:hover {
	background: var(--ua-accent-hover); transform: scale(1.03);
}

.ua-recs-title {
	color: #fff; font-size: 1.2em; margin: 0 0 6px; text-align: center;
}
.ua-recs-intro {
	color: var(--ua-text-muted); font-size: 0.88em;
	text-align: center; margin: 0 0 16px;
}
.ua-recs-empty { color: var(--ua-text-muted); text-align: center; font-size: 0.88em; padding: 18px 0; }
.ua-recs-list { display: flex; flex-direction: column; gap: 10px; }
.ua-rec-card {
	display: flex; align-items: center; gap: 12px; padding: 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	text-decoration: none; color: inherit;
	transition: background 120ms ease, transform 120ms ease;
}
.ua-rec-card:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
	color: inherit; text-decoration: none;
}
.ua-rec-thumb {
	width: 56px; height: 56px;
	object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.ua-rec-thumb--placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--ua-bg-dark-2); color: #555; font-size: 26px;
}
.ua-rec-meta { flex: 1 1 auto; min-width: 0; }
.ua-rec-meta h4 {
	margin: 0 0 4px; font-size: 0.95em; color: #fff; line-height: 1.3;
}
.ua-rec-price { color: var(--ua-accent); font-size: 0.85em; font-weight: 600; }
.ua-rec-price del { color: #707074; font-weight: 400; margin-right: 6px; }

.ua-recs-actions { justify-content: center; margin-top: 18px; }
.ua-replay {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #d8d8da; cursor: pointer;
	font-size: 0.88em; padding: 8px 18px; border-radius: 20px;
	transition: background 120ms ease, color 120ms ease;
}
.ua-replay:hover {
	background: rgba(255, 255, 255, 0.08); color: #fff;
}

/* ============= Demo player (pagina prodotto) — pill nero/rosso ============= */
/*
 * Tutte le regole critiche usano !important o alta specificità per resistere
 * ai reset globali di WooCommerce/tema (button { background; color; padding… }).
 */

.ua-demo {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	background: var(--ua-bg-dark) !important;
	border-radius: 60px !important;
	padding: 12px 24px 12px 12px !important;
	color: var(--ua-text-light) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
	max-width: 480px !important;
	margin: 18px 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	/* reset qualsiasi bordo messo dal tema */
	border: none !important;
	outline: none !important;
}

.ua-demo * { box-sizing: border-box; }

.ua-demo-audio { display: none !important; }

/* ── Play / Pause ── */
.ua-demo-play {
	/* reset totale stili WC / tema */
	all: unset !important;
	/* poi ri-applichiamo tutto */
	box-sizing: border-box !important;
	width: 56px !important; height: 56px !important; min-width: 56px !important;
	background: var(--ua-accent) !important;
	background-color: var(--ua-accent) !important;
	color: var(--ua-on-accent) !important;
	border: none !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
	box-shadow: 0 4px 12px rgba(var(--ua-accent-rgb), 0.35) !important;
	text-decoration: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.ua-demo-play:hover {
	background: var(--ua-accent-hover) !important;
	background-color: var(--ua-accent-hover) !important;
	color: var(--ua-on-accent) !important;
	transform: scale(1.04) !important;
	box-shadow: 0 6px 18px rgba(var(--ua-accent-rgb), 0.5) !important;
}
.ua-demo-play:focus-visible {
	outline: 2px solid #fff !important; outline-offset: 3px !important;
}

/* Icone play/pause — reset per sicurezza, poi display */
.ua-demo-play svg {
	display: inline-block !important;
	pointer-events: none !important;
}
.ua-demo-icon-play  { transform: translateX(2px); }
.ua-demo-icon-pause { display: none !important; }
.ua-demo.is-playing .ua-demo-icon-play  { display: none !important; }
.ua-demo.is-playing .ua-demo-icon-pause { display: inline-block !important; }

/* ── Body ── */
.ua-demo-body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.ua-demo-title {
	color: #fff !important;
	font-size: 0.95em !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── Progress row ── */
.ua-demo-progress-row {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

/* Barra a DIV (no input range) */
.ua-demo-bar {
	position: relative !important;
	flex: 1 1 auto !important;
	min-width: 60px !important;
	height: 5px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 3px !important;
	background: rgba(255, 255, 255, 0.22) !important;
	outline: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
	touch-action: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.ua-demo-fill {
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	height: 100% !important;
	width: 0%;
	background: var(--ua-accent) !important;
	border-radius: 3px !important;
	pointer-events: none !important;
}
.ua-demo-handle {
	position: absolute !important;
	top: 50% !important;
	left: var(--handle, 0%);
	width: 12px !important; height: 12px !important;
	margin-left: -6px !important;
	transform: translateY(-50%) scale(0) !important;
	background: #fff !important;
	border: 2px solid var(--ua-accent) !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
	transition: transform 120ms ease !important;
	pointer-events: none !important;
}
.ua-demo-bar:hover .ua-demo-handle,
.ua-demo-bar:focus .ua-demo-handle,
.ua-demo-bar:active .ua-demo-handle {
	transform: translateY(-50%) scale(1) !important;
}
.ua-demo-bar:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6) !important;
	outline-offset: 3px !important;
}

.ua-demo-time {
	color: rgba(255,255,255,0.85) !important;
	font-size: 0.74em !important;
	font-variant-numeric: tabular-nums !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	line-height: 1 !important;
	min-width: 36px !important;
	text-align: right !important;
}

/* ── Controls (volume + EQ + loop) ── */
.ua-demo-controls {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-top: 2px !important;
}

/* Reset totale bottoni secondari — battono i selettori WC tipo
   .woocommerce button.button, button.button, ecc. */
.ua-demo .ua-demo-vol,
.ua-demo .ua-demo-loop {
	all: unset !important;
	box-sizing: border-box !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	color: rgba(255,255,255,0.75) !important;
	cursor: pointer !important;
	padding: 3px !important;
	margin: 0 !important;
	line-height: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important; height: auto !important;
	min-width: 0 !important; min-height: 0 !important;
	font-size: inherit !important;
	font-weight: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline: none !important;
	transition: color 150ms ease, opacity 150ms ease, transform 150ms ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.ua-demo .ua-demo-vol:hover,
.ua-demo .ua-demo-loop:hover {
	background: transparent !important;
	background-color: transparent !important;
	color: #fff !important;
	transform: scale(1.12) !important;
	box-shadow: none !important;
}
.ua-demo .ua-demo-vol:focus-visible,
.ua-demo .ua-demo-loop:focus-visible {
	outline: 1px solid rgba(255,255,255,0.6) !important;
	outline-offset: 2px !important;
	border-radius: 2px !important;
}

.ua-demo .ua-demo-vol svg,
.ua-demo .ua-demo-loop svg { pointer-events: none !important; }

/* Stato volume */
.ua-demo-icon-vol-off { display: none !important; }
.ua-demo.is-muted .ua-demo-icon-vol-on { display: none !important; }
.ua-demo.is-muted .ua-demo-icon-vol-off { display: inline-block !important; }

/* Loop attivo */
.ua-demo .ua-demo-loop[aria-pressed="true"] {
	color: var(--ua-accent) !important;
}

/* ── Equalizer ── */
.ua-demo-eq {
	display: inline-flex !important;
	align-items: flex-end !important;
	gap: 2px !important;
	height: 14px !important;
	transform-origin: bottom !important;
	flex-shrink: 0 !important;
}
.ua-demo-eq i {
	display: block !important;
	width: 2px !important;
	background: rgba(255,255,255,0.6) !important;
	border-radius: 1px !important;
	transform-origin: bottom !important;
}
.ua-demo-eq i:nth-child(1) { height: 30% !important; }
.ua-demo-eq i:nth-child(2) { height: 60% !important; }
.ua-demo-eq i:nth-child(3) { height: 90% !important; }
.ua-demo-eq i:nth-child(4) { height: 100% !important; }
.ua-demo-eq i:nth-child(5) { height: 80% !important; }
.ua-demo-eq i:nth-child(6) { height: 60% !important; }
.ua-demo-eq i:nth-child(7) { height: 90% !important; }
.ua-demo-eq i:nth-child(8) { height: 50% !important; }

.ua-demo.is-playing .ua-demo-eq i {
	animation: ua-eq-pulse 0.9s ease-in-out infinite !important;
}
.ua-demo.is-playing .ua-demo-eq i:nth-child(1) { animation-delay: 0.0s !important; }
.ua-demo.is-playing .ua-demo-eq i:nth-child(2) { animation-delay: 0.12s !important; }
.ua-demo.is-playing .ua-demo-eq i:nth-child(3) { animation-delay: 0.24s !important; }
.ua-demo.is-playing .ua-demo-eq i:nth-child(4) { animation-delay: 0.36s !important; }
.ua-demo.is-playing .ua-demo-eq i:nth-child(5) { animation-delay: 0.48s !important; }
.ua-demo.is-playing .ua-demo-eq i:nth-child(6) { animation-delay: 0.18s !important; }
.ua-demo.is-playing .ua-demo-eq i:nth-child(7) { animation-delay: 0.30s !important; }
.ua-demo.is-playing .ua-demo-eq i:nth-child(8) { animation-delay: 0.42s !important; }

@keyframes ua-eq-pulse {
	0%, 100% { transform: scaleY(0.4); }
	50%       { transform: scaleY(1); }
}

.ua-demo.is-muted .ua-demo-eq i { animation: none !important; }

/* ── Mobile demo ── */
@media (max-width: 480px) {
	.ua-demo {
		padding: 10px 18px 10px 10px !important;
		gap: 12px !important;
		border-radius: 50px !important;
	}
	.ua-demo-play {
		width: 48px !important; height: 48px !important; min-width: 48px !important;
	}
	.ua-demo-play svg { width: 18px !important; height: 18px !important; }
	.ua-demo-title  { font-size: 0.88em !important; }
	.ua-demo-time   { font-size: 0.7em !important; min-width: 32px !important; }
}

/* ============= Schermata fine ascolto (countdown sblocco quiz) ============= */
.ua-endscreen {
	text-align: center;
	padding: 8px 4px 4px;
	color: var(--ua-text-light);
}
.ua-end-icon {
	font-size: 44px;
	line-height: 1;
	margin-bottom: 12px;
}
.ua-end-title {
	color: #fff;
	font-size: 1.25em;
	font-weight: 700;
	margin: 0 0 10px;
}
.ua-end-text {
	color: #e4e4e6;
	font-size: 0.98em;
	line-height: 1.5;
	margin: 0 auto 6px;
	max-width: 300px;
}
.ua-end-text strong { color: var(--ua-accent); }
.ua-end-note {
	color: var(--ua-text-muted);
	font-size: 0.85em;
	margin: 0 auto;
	max-width: 300px;
}
.ua-end-btn {
	display: inline-block;
	margin-top: 16px;
	background: var(--ua-accent);
	color: var(--ua-on-accent);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92em;
	padding: 11px 24px;
	border-radius: 24px;
	transition: background 120ms ease, transform 120ms ease;
}
.ua-end-btn:hover {
	background: var(--ua-accent-hover);
	color: var(--ua-on-accent);
	transform: scale(1.03);
}
.ua-end-actions { margin-top: 18px; }
.ua-end-actions .ua-replay {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #d8d8da; cursor: pointer;
	font-size: 0.85em; padding: 7px 16px; border-radius: 20px;
	transition: background 120ms ease, color 120ms ease;
}
.ua-end-actions .ua-replay:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ============= Pagina quiz personale (My Account) ============= */
.ua-quiz-card {
	background: rgba(18, 24, 38, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 20px;
	padding: 32px 28px;
	max-width: 480px;
	margin: 0 auto;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
	color: var(--ua-text-light);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.ua-quiz-heading {
	color: #fff; text-align: center;
	font-size: 1.3em; font-weight: 700; margin: 0 0 4px;
}
.ua-quiz-sub {
	color: var(--ua-text-muted); text-align: center;
	font-size: 0.9em; margin: 0 0 22px;
}
.ua-quiz-state { text-align: center; padding: 10px 0 4px; }
.ua-quiz-icon { font-size: 46px; line-height: 1; margin-bottom: 14px; }
.ua-quiz-state p { color: #e4e4e6; font-size: 0.98em; line-height: 1.5; margin: 0 auto 8px; max-width: 340px; }
.ua-quiz-state strong { color: var(--ua-accent); }
.ua-quiz-note { color: var(--ua-text-muted) !important; font-size: 0.85em !important; }
.ua-quiz-btn {
	display: inline-block; margin-top: 14px;
	background: var(--ua-accent); color: var(--ua-on-accent);
	text-decoration: none; font-weight: 700; font-size: 0.92em;
	padding: 11px 24px; border-radius: 24px;
	transition: background 120ms ease, transform 120ms ease;
}
.ua-quiz-btn:hover { background: var(--ua-accent-hover); color: var(--ua-on-accent); transform: scale(1.03); }
.ua-quiz-btn--ghost {
	background: transparent; color: #d8d8da;
	border: 1px solid rgba(255, 255, 255, 0.18); font-weight: 500;
}
.ua-quiz-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* La form del quiz riusa le classi .ua-survey-* / .ua-recs-* (testo chiaro su scuro). */
.ua-quiz .ua-loading { color: var(--ua-text-muted); text-align: center; padding: 24px 0; }
.ua-quiz .ua-recs-actions .ua-replay {
	display: inline-block; text-decoration: none;
	background: transparent; border: 1px solid rgba(255, 255, 255, 0.18);
	color: #d8d8da; font-size: 0.88em; padding: 8px 18px; border-radius: 20px;
}
.ua-quiz .ua-recs-actions .ua-replay:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ============= Esito quiz (in base al punteggio) ============= */
.ua-result {
	background: rgba(198, 245, 66, 0.08);
	border: 1px solid rgba(198, 245, 66, 0.35);
	border-left: 4px solid var(--ua-accent);
	border-radius: 10px;
	padding: 18px 20px;
	margin: 0 0 20px;
}
.ua-result-title {
	color: var(--ua-accent);
	font-size: 1.2em;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.25;
}
.ua-result-body {
	color: #e8e8ea;
	font-size: 0.96em;
	line-height: 1.55;
}
.ua-result-body p { margin: 0 0 10px; }
.ua-result-body p:last-child { margin-bottom: 0; }
.ua-result-body strong { color: #fff; }

/* ============= Caption anteprima demo (pagina prodotto) ============= */
.ua-demo-caption {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 480px;
	margin: 10px 2px 18px;
	color: #6b6b70;
	font-size: 0.86em;
	line-height: 1.4;
	font-style: italic;
}
.ua-demo-caption-icon {
	font-style: normal;
	font-size: 1.05em;
	flex-shrink: 0;
}

/* ============= Sezione "Quiz" in My Account ============= */
.ua-quizlist-intro {
	color: #555;
	font-size: 0.95em;
	margin: 0 0 18px;
}
.ua-quizlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ua-quizlist-item {
	display: flex;
	gap: 16px;
	padding: 16px;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	background: #fff;
}
.ua-quizlist-thumb {
	width: 64px; height: 64px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #f0f0f0;
	display: flex; align-items: center; justify-content: center;
}
.ua-quizlist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ua-quizlist-thumb-ph { font-size: 26px; color: #aaa; }
.ua-quizlist-body { flex: 1 1 auto; min-width: 0; }
.ua-quizlist-title {
	margin: 0 0 8px;
	font-size: 1.05em;
	line-height: 1.3;
	color: #1a1a1a;
}
.ua-quizlist-state {
	margin: 0 0 10px;
	font-size: 0.92em;
	font-weight: 600;
}
.ua-state-muted  { color: #777; }
.ua-state-locked { color: #b07b00; }
.ua-state-ready  { color: #4a7c00; }
.ua-quizlist-subnote { margin: 0 0 6px; font-size: 0.85em; color: #777; }
.ua-quizlist-subnote strong { color: #555; }

.ua-quizlist-btn {
	display: inline-block;
	background: var(--ua-accent);
	color: var(--ua-on-accent);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.88em;
	padding: 9px 20px;
	border-radius: 22px;
	transition: background 120ms ease, transform 120ms ease;
}
.ua-quizlist-btn:hover { background: var(--ua-accent-hover); color: var(--ua-on-accent); transform: scale(1.03); }
.ua-quizlist-btn--ghost {
	background: transparent;
	color: #444;
	border: 1px solid #ccc;
	font-weight: 500;
}
.ua-quizlist-btn--ghost:hover { background: #f5f5f5; color: #111; }

.ua-quizlist-result {
	background: rgba(198, 245, 66, 0.12);
	border: 1px solid rgba(160, 200, 40, 0.5);
	border-left: 4px solid var(--ua-accent);
	border-radius: 8px;
	padding: 12px 16px;
}
.ua-quizlist-badge {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 700;
	color: #4a7c00;
	margin-bottom: 6px;
}
.ua-quizlist-result-title {
	margin: 0 0 8px;
	font-size: 1.05em;
	color: #2b2b2b;
	line-height: 1.25;
}
.ua-quizlist-result-body {
	color: #444;
	font-size: 0.92em;
	line-height: 1.55;
}
.ua-quizlist-result-body p { margin: 0 0 8px; }
.ua-quizlist-result-body p:last-child { margin-bottom: 0; }
.ua-quizlist-result-body strong { color: #1a1a1a; }

@media (max-width: 600px) {
	.ua-quizlist-item { flex-wrap: wrap; }
}