/* Tutorial guidati (app tours): tema del popover di Driver.js e pulsante in testata.
   Caricato da base.html solo sulle pagine che hanno un tutorial. Colori dai token
   di tla-tokens.css; il bottone pieno usa il verde 700 (testo bianco AAA). */

.driver-popover.tla-tour-popover {
	--driver-popover-font-family: var(--tla-font-sans, "Titillium Web", sans-serif);
	color: var(--tla-ink, #1f2421);
	border-radius: var(--tla-radius-surf, 8px);
	max-width: min(360px, calc(100vw - 32px));
	padding: 18px 18px 14px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.tla-tour-popover .driver-popover-title {
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	padding-right: 28px;
}

.tla-tour-popover .driver-popover-description {
	font-size: 1rem;
	line-height: 1.5;
}

.tla-tour-popover .driver-popover-description p { margin: 0 0 0.5rem; }
.tla-tour-popover .driver-popover-description p:last-child { margin-bottom: 0; }

.tla-tour-popover .driver-popover-progress-text {
	color: var(--tla-ink-muted, #565e64);
	font-size: 0.85rem;
}

/* Driver.js usa un <footer>: app.css colora di verde ogni footer del sito. */
.tla-tour-popover .driver-popover-footer {
	background: transparent;
	flex-wrap: wrap;
	gap: 8px;
}

.tla-tour-popover .driver-popover-navigation-btns { gap: 6px; }
.tla-tour-popover .driver-popover-navigation-btns button + button { margin-left: 0; }

.tla-tour-popover .driver-popover-footer-btn {
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: var(--tla-radius-ctrl, 4px);
	border: 1px solid var(--tla-green-500, #009933);
	color: var(--tla-green-600, #007722);
	background: var(--tla-surface, #fff);
	text-shadow: none;
}

.tla-tour-popover .driver-popover-footer-btn:hover,
.tla-tour-popover .driver-popover-footer-btn:focus-visible {
	background: var(--tla-green-050, #f2fbf5);
}

/* "Continua" ha l'aspetto di Avanti senza la sua classe (vedi tla-tour.js). */
.tla-tour-popover .driver-popover-next-btn,
.tla-tour-popover .tla-tour-continua {
	background: var(--tla-green-700, #005511);
	border-color: var(--tla-green-700, #005511);
	color: #fff;
	text-decoration: none;
}

.tla-tour-popover .driver-popover-next-btn:hover,
.tla-tour-popover .driver-popover-next-btn:focus-visible,
.tla-tour-popover .tla-tour-continua:hover,
.tla-tour-popover .tla-tour-continua:focus-visible {
	background: var(--tla-green-900, #004c28);
	color: #fff;
}

.tla-tour-popover .driver-popover-footer-btn:focus-visible,
.tla-tour-popover .driver-popover-close-btn:focus-visible {
	outline: 3px solid var(--tla-green-500, #009933);
	outline-offset: 2px;
}

.tla-tour-popover .driver-popover-close-btn {
	color: var(--tla-ink-muted, #565e64);
	width: 40px;
	height: 40px;
	font-size: 22px;
}

/* "Mostrami un esempio": un link con l'aspetto di un bottone, a sinistra dei comandi. */
.tla-tour-popover .tla-tour-mostrami {
	margin-right: auto;
	text-decoration: none;
}

/* Target touch >= 44px, come il resto del sito (WCAG 2.5.5). */
@media (hover: none), (pointer: coarse) {
	.tla-tour-popover .driver-popover-footer-btn,
	.tla-tour-popover .driver-popover-close-btn {
		min-height: 44px;
		min-width: 44px;
	}
}

/* Durante il tutorial Driver.js toglie i click a tutto tranne l'elemento evidenziato.
   Il menu a tendina di select2 sta in fondo al body, fuori dall'elemento: senza
   questa eccezione un passo "cerca una specie" non si potrebbe completare. */
.driver-active .select2-container--open {
	z-index: 10001;
}
.driver-active .select2-container--open,
.driver-active .select2-container--open * {
	pointer-events: auto;
}
/* Mentre il menu e' aperto il popover si fa da parte: altrimenti copre i risultati. */
.driver-active:has(.select2-container--open) .tla-tour-popover {
	visibility: hidden;
}

/* Pulsante "Guida" nella fascia alta (fondo verde scuro). */
.tla-tour-avvia {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.7);
	background: transparent;
	white-space: nowrap;
}

.tla-tour-avvia:hover,
.tla-tour-avvia:focus-visible {
	color: var(--tla-green-900, #004c28);
	background: #fff;
	border-color: #fff;
}

@media print {
	.tla-tour-avvia { display: none !important; }
}