/* Cookie Shield – stile banner, pannello e placeholder.
   Specificità alta + z-index elevato per convivere con Avada/Divi. */

#cs-root {
	--cs-primary: #1a7f5a;
	--cs-bg: #ffffff;
	--cs-text: #1f2933;
	--cs-muted: #5b6770;
	--cs-radius: 14px;
	position: fixed;
	z-index: 2147483000;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px;
	pointer-events: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

#cs-root.cs-pos-bottom .cs-banner { margin: 0 auto; }
#cs-root.cs-pos-bottom-left .cs-banner { margin-right: auto; }
#cs-root.cs-pos-bottom-right .cs-banner { margin-left: auto; }

#cs-root .cs-banner {
	pointer-events: auto;
	max-width: 640px;
	background: var(--cs-bg);
	color: var(--cs-text);
	border-radius: var(--cs-radius);
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
	padding: 22px 24px;
	max-height: 85vh;
	overflow-y: auto;
	animation: cs-slide-up 0.35s ease;
}

@keyframes cs-slide-up {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

#cs-root h3 {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--cs-text) !important;
}

#cs-root .cs-body p {
	margin: 0 0 14px !important;
	color: var(--cs-muted) !important;
	font-size: 14px !important;
}

#cs-root .cs-body a {
	color: var(--cs-primary) !important;
	text-decoration: underline !important;
}

/* --- Pannello categorie ------------------------------------------------ */

#cs-root .cs-panel {
	border-top: 1px solid #e4e7eb;
	margin-bottom: 14px;
	padding-top: 6px;
}

#cs-root .cs-cat { padding: 10px 0 4px; }

#cs-root .cs-cat-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

#cs-root .cs-cat p {
	margin: 4px 0 0 54px !important;
	font-size: 13px !important;
	color: var(--cs-muted) !important;
}

/* Switch */
#cs-root .cs-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	flex: 0 0 44px;
}
#cs-root .cs-switch input { opacity: 0; width: 0; height: 0; }
#cs-root .cs-slider {
	position: absolute;
	inset: 0;
	background: #cbd2d9;
	border-radius: 24px;
	transition: 0.2s;
	cursor: pointer;
}
#cs-root .cs-slider::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: 0.2s;
}
#cs-root .cs-switch input:checked + .cs-slider { background: var(--cs-primary); }
#cs-root .cs-switch input:checked + .cs-slider::before { transform: translateX(20px); }
#cs-root .cs-switch input:disabled + .cs-slider { opacity: 0.55; cursor: not-allowed; }

/* --- Bottoni ------------------------------------------------------------ */

#cs-root .cs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.cs-btn {
	appearance: none;
	border: 0;
	border-radius: 10px;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease, background 0.15s ease;
	line-height: 1.2;
}
.cs-btn-primary {
	background: var(--cs-primary, #1a7f5a);
	color: #fff;
}
.cs-btn-primary:hover { filter: brightness(1.1); }
.cs-btn-ghost {
	background: #eef1f4;
	color: #1f2933;
}
.cs-btn-ghost:hover { background: #e0e5ea; }

@media (max-width: 560px) {
	#cs-root .cs-actions { justify-content: stretch; }
	#cs-root .cs-actions .cs-btn { flex: 1 1 auto; }
}

/* --- Riga di credito ----------------------------------------------------- */

/* Sta dentro .cs-actions: il margine destro automatico spinge i pulsanti in
   fondo e tiene il credito a sinistra, senza occupare una riga in più. */
#cs-root .cs-actions .cs-credit {
	margin: 0 auto 0 0;
	align-self: center;
	text-align: left;
	font-size: 12px;
	line-height: 1.3;
	opacity: .7;
}

/* Schermi stretti: i pulsanti diventano a tutta larghezza, il credito passa
   su una riga propria sopra di loro invece di stringerli. */
@media (max-width: 560px) {
	#cs-root .cs-actions .cs-credit {
		flex: 1 0 100%;
		margin: 0 0 2px;
		text-align: center;
	}
}

/* --- Pulsante riapri preferenze ----------------------------------------- */

#cs-reopen {
	position: fixed;
	z-index: 2147482999;
	left: 16px;
	bottom: 16px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: var(--cs-primary, #1a7f5a);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}
#cs-reopen:hover { transform: scale(1.08); }

/* --- Placeholder embed bloccati ------------------------------------------ */

/* Wrapper di un singolo embed bloccato (iframe): lo creiamo noi o è il
   wrapper responsive del builder, quindi ritagliarlo è sicuro. */
.cs-placeholder-wrap { position: relative; overflow: hidden; }

/* Contenitore di uno slider il cui video di sfondo è bloccato. Qui serve
   SOLO un contesto di posizionamento per l'overlay: niente overflow:hidden,
   che su Revolution Slider ritaglierebbe i layer, e nessuna altra proprietà,
   perché il modulo è markup di terze parti che non dobbiamo alterare. */
.cs-placeholder-host { position: relative; }

/* --- Poster locale al posto del placeholder sfocato ----------------------- */
/* Usato quando lo slider espone un'immagine di anteprima ospitata sul sito:
   si vede il fotogramma del video, senza alcuna richiesta a YouTube. */

.cs-poster-ph {
	position: absolute;
	inset: 0;
	z-index: 9;
	overflow: hidden;
}

.cs-poster-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Sfumatura solo nella fascia bassa: il soggetto dell'immagine resta libero
   e il testo sopra resta leggibile su qualunque fotogramma. */
.cs-poster-ph::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 58%;
	background: linear-gradient(to top, rgba(10, 14, 18, .78) 0%, rgba(10, 14, 18, .35) 45%, rgba(10, 14, 18, 0) 100%);
	pointer-events: none;
}

.cs-poster-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	padding: 24px 32px;
	color: #fff;
}

/* Scritta discreta: nessun pulsante, perché non c'è nulla da cliccare.
   Il video riparte al caricamento successivo, dopo l'accettazione. */
.cs-poster-note {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: rgba(16, 22, 28, .42);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	padding: 10px 18px 10px 15px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	color: rgba(255, 255, 255, .96);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.cs-poster-note svg {
	flex: 0 0 auto;
	opacity: .9;
}

@media (max-width: 782px) {
	.cs-poster-bar { padding: 16px 18px; }
	.cs-poster-note { font-size: 12.5px; padding: 9px 15px 9px 12px; }
}

.cs-placeholder {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border-radius: 6px;
	min-height: 180px;
	text-align: center;
	overflow: hidden;
}

/* Sfondo sfumato e SFOCATO che simula un fotogramma fuori fuoco: nessuna
   richiesta esterna (non carichiamo miniature da YouTube, sarebbero tracker).
   Più blobs di colore morbidi + blur pesante = effetto "immagine sfuocata". */
.cs-placeholder .cs-ph-blur {
	position: absolute;
	inset: -40px; /* deborda per non mostrare bordi chiari dopo il blur */
	background:
		radial-gradient(40% 55% at 22% 30%, rgba(120,150,190,0.95), transparent 60%),
		radial-gradient(45% 60% at 78% 25%, rgba(90,120,140,0.9), transparent 60%),
		radial-gradient(55% 65% at 65% 80%, rgba(70,95,120,0.95), transparent 62%),
		radial-gradient(50% 60% at 20% 85%, rgba(100,120,110,0.9), transparent 60%),
		linear-gradient(135deg, #3a4a5c, #26313d);
	filter: blur(28px) saturate(1.15);
	transform: scale(1.15);
}

/* Scrim scuro sopra il blur per garantire il contrasto del testo. */
.cs-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 26, 33, 0.55);
	z-index: 1;
}

.cs-placeholder .cs-ph-inner {
	position: relative;
	z-index: 2;
	max-width: 460px;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.cs-placeholder .cs-ph-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(2px);
	color: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.cs-placeholder.cs-ph-video .cs-ph-icon { padding-left: 4px; } /* centra il play */

.cs-placeholder .cs-ph-title {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #fff !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
	line-height: 1.4 !important;
}

.cs-placeholder .cs-ph-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.cs-placeholder .cs-ph-unlock {
	background: var(--cs-primary, #1a7f5a);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}
.cs-placeholder .cs-ph-unlock:hover { filter: brightness(1.1); }

.cs-placeholder .cs-ph-all {
	appearance: none;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px;
}
.cs-placeholder .cs-ph-all:hover { color: #fff; }

/* Su placeholder piccoli/stretti compatta il contenuto. */
@media (max-width: 400px) {
	.cs-placeholder .cs-ph-title { font-size: 13px !important; }
	.cs-placeholder .cs-ph-icon { width: 46px; height: 46px; }
}

/* Se il wrapper del builder collassa (iframe senza src), garantisci altezza
   e uno sfondo sfumato (non un bianco/nero piatto che sembra rotto). */
iframe.cs-blocked-iframe {
	min-height: 200px;
	background: linear-gradient(135deg, #3a4a5c, #26313d);
}

/* --- Avviso sui form Contact Form 7 con reCAPTCHA bloccato --------------- */

.cs-form-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 16px;
	padding: 12px 16px;
	background: #f4f6f8;
	border-left: 4px solid var(--cs-primary, #1a7f5a);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: #1f2933;
}
.cs-form-notice p { margin: 0 !important; flex: 1 1 260px; }
.cs-form-notice.cs-form-notice-alert { border-left-color: #c0392b; background: #fdf1f0; }

/* --- Dichiarazione cookie ([cookie_shield_declaration]) ------------------ */

.cs-declaration { font-size: 15px; line-height: 1.6; }

.cs-declaration h3 {
	margin: 1.6em 0 0.4em;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--cs-primary, #1a7f5a);
}

.cs-declaration h4 { margin: 1.1em 0 0.35em; }

.cs-decl-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 10px;
	font-size: 14px;
}
.cs-decl-table th,
.cs-decl-table td {
	border: 1px solid #e0e5ea;
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}
.cs-decl-table th { background: #f4f6f8; }
.cs-decl-table code { font-size: 13px; }

.cs-decl-state {
	background: #f4f6f8;
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 14px;
}
.cs-decl-state .cs-btn { margin-right: 8px; }

.cs-decl-meta { font-size: 13px; color: #5b6770; }