/**
 * HI Language Banner - Frontend modal.
 * Namespaced sotto .hi-lang-banner__* per evitare collisioni con il tema Impreza.
 * z-index molto alto per stare sopra header sticky e popup di altri plugin.
 *
 * Personalizzazione tema: override le CSS variables sotto :root o
 * .hi-lang-banner__overlay (es. dal tuo child theme o nel personalizzatore):
 *
 *   :root {
 *     --hi-lang-banner-overlay-bg: rgba(0, 0, 0, 0.85);
 *     --hi-lang-banner-box-bg: #fafafa;
 *     --hi-lang-banner-text: #111;
 *     --hi-lang-banner-cta-bg: #c8a45c;
 *     --hi-lang-banner-cta-color: #fff;
 *   }
 */

:root {
	--hi-lang-banner-overlay-bg: rgba( 17, 17, 17, 0.72 );
	--hi-lang-banner-box-bg: #fff;
	--hi-lang-banner-text: #111;
	--hi-lang-banner-muted: #555;
	--hi-lang-banner-btn-bg: #f3f4f6;
	--hi-lang-banner-btn-border: #e5e7eb;
	--hi-lang-banner-btn-hover-bg: #e5e7eb;
	--hi-lang-banner-btn-hover-border: #d1d5db;
	--hi-lang-banner-cta-bg: #111;
	--hi-lang-banner-cta-border: #111;
	--hi-lang-banner-cta-color: #fff;
	--hi-lang-banner-cta-hover-bg: #222;
	--hi-lang-banner-cta-hover-border: #222;
	--hi-lang-banner-close-bg: transparent;
	--hi-lang-banner-close-hover-bg: #f3f4f6;
	--hi-lang-banner-close-color: #555;
	--hi-lang-banner-badge-bg: #f59e0b;
	--hi-lang-banner-badge-color: #fff;
	--hi-lang-banner-radius: 8px;
	--hi-lang-banner-shadow: 0 18px 48px rgba( 0, 0, 0, 0.28 );
	--hi-lang-banner-zindex: 999999;
	--hi-lang-banner-transition: 0.2s ease;
}

html.hi-lang-banner-open,
html.hi-lang-banner-open body {
	overflow: hidden;
}

.hi-lang-banner__overlay {
	position: fixed;
	inset: 0;
	background: var( --hi-lang-banner-overlay-bg );
	z-index: var( --hi-lang-banner-zindex );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	transition: opacity var( --hi-lang-banner-transition );
}

.hi-lang-banner__overlay.is-visible {
	opacity: 1;
}

.hi-lang-banner__overlay.is-fading {
	opacity: 0;
}

.hi-lang-banner__box {
	position: relative;
	background: var( --hi-lang-banner-box-bg );
	color: var( --hi-lang-banner-text );
	max-width: 480px;
	width: 100%;
	padding: 2rem 1.75rem 1.75rem;
	border-radius: var( --hi-lang-banner-radius );
	box-shadow: var( --hi-lang-banner-shadow );
	font-family: inherit;
	box-sizing: border-box;
	transform: translateY( 8px );
	transition: transform var( --hi-lang-banner-transition );
}

.hi-lang-banner__overlay.is-visible .hi-lang-banner__box {
	transform: translateY( 0 );
}

.hi-lang-banner__box[dir="rtl"] {
	text-align: right;
}

.hi-lang-banner__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: var( --hi-lang-banner-badge-bg );
	color: var( --hi-lang-banner-badge-color );
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	font-weight: 700;
	padding: 0.2rem 0.5rem;
	border-radius: 3px;
	text-transform: uppercase;
}

.hi-lang-banner__box[dir="rtl"] .hi-lang-banner__badge {
	left: auto;
	right: 0.75rem;
}

.hi-lang-banner__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 36px;
	height: 36px;
	border: none;
	background: var( --hi-lang-banner-close-bg );
	font-size: 1.6rem;
	line-height: 1;
	color: var( --hi-lang-banner-close-color );
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.15s ease, color 0.15s ease;
}

.hi-lang-banner__close:hover,
.hi-lang-banner__close:focus {
	background: var( --hi-lang-banner-close-hover-bg );
	color: var( --hi-lang-banner-text );
	outline: none;
}

.hi-lang-banner__box[dir="rtl"] .hi-lang-banner__close {
	right: auto;
	left: 0.5rem;
}

.hi-lang-banner__title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.hi-lang-banner__hint {
	margin: 0 0 1.25rem;
	color: var( --hi-lang-banner-muted );
	font-size: 0.95rem;
}

/* Istruzione operativa sopra i bottoni lingua (modale area non chiudibile). */
.hi-lang-banner__action {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --hi-lang-banner-text );
}

.hi-lang-banner__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Countdown del redirect automatico (solo modale area, non chiudibile). */
.hi-lang-banner__countdown {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	color: var( --hi-lang-banner-muted );
	text-align: center;
	min-height: 1.2em;
}

.hi-lang-banner__btn {
	flex: 1 1 auto;
	min-width: 7rem;
	padding: 0.7rem 1.1rem;
	background: var( --hi-lang-banner-btn-bg );
	color: var( --hi-lang-banner-text );
	border: 1px solid var( --hi-lang-banner-btn-border );
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hi-lang-banner__btn:hover,
.hi-lang-banner__btn:focus {
	background: var( --hi-lang-banner-btn-hover-bg );
	border-color: var( --hi-lang-banner-btn-hover-border );
	outline: none;
}

.hi-lang-banner__btn.is-suggested {
	background: var( --hi-lang-banner-cta-bg );
	color: var( --hi-lang-banner-cta-color );
	border-color: var( --hi-lang-banner-cta-border );
}

.hi-lang-banner__btn.is-suggested:hover,
.hi-lang-banner__btn.is-suggested:focus {
	background: var( --hi-lang-banner-cta-hover-bg );
	border-color: var( --hi-lang-banner-cta-hover-border );
}

/* Stato "click ricevuto": bottoni disabilitati (tranne quello in caricamento). */
.hi-lang-banner__btn:disabled:not( .is-loading ),
.hi-lang-banner__btn.is-disabled:not( .is-loading ) {
	cursor: default;
	opacity: 0.6;
}

/* Bottone scelto: spinner + label, mantiene il look pieno (anche .is-suggested). */
.hi-lang-banner__btn.is-loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	cursor: default;
}

.hi-lang-banner__spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	flex: 0 0 auto;
	animation: hi-lang-banner-spin 0.6s linear infinite;
}

@keyframes hi-lang-banner-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hi-lang-banner__overlay,
	.hi-lang-banner__box {
		transition: none;
	}
	/* Niente rotazione: lo spinner resta statico, ma il cambio testo resta feedback. */
	.hi-lang-banner__spinner {
		animation: none;
	}
}

@media ( max-width: 480px ) {
	.hi-lang-banner__box {
		padding: 1.5rem 1.25rem;
	}
	.hi-lang-banner__btn {
		flex: 1 1 100%;
	}
}