/**
 * Kreita Cookie & Privacy Compliance - stile del banner front-end.
 * I colori e le dimensioni sono pilotati dalle variabili CSS iniettate dal plugin.
 */

.kcc-banner {
	position: fixed;
	z-index: 999999;
	box-sizing: border-box;
	max-width: var(--kcc-width, 460px);
	width: calc(100% - 40px);
	background: var(--kcc-bg, #fff);
	color: var(--kcc-text, #1d2327);
	font-size: var(--kcc-font-size, 14px);
	line-height: 1.5;
	border-radius: var(--kcc-radius, 10px);
	padding: var(--kcc-padding, 24px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
	font-family: inherit;
}

.kcc-banner *,
.kcc-banner *::before,
.kcc-banner *::after {
	box-sizing: border-box;
}

.kcc-banner[hidden] {
	display: none;
}

/* --- Posizioni (layout box) --- */
.kcc-pos-bottom-left  { left: 20px;  bottom: 20px; }
.kcc-pos-bottom-right { right: 20px; bottom: 20px; }
.kcc-pos-bottom       { left: 50%; bottom: 20px; transform: translateX(-50%); }
.kcc-pos-top          { left: 50%; top: 20px;    transform: translateX(-50%); }
.kcc-pos-center       { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* --- Layout: barra a tutta larghezza --- */
.kcc-layout-bar {
	max-width: none;
	width: 100%;
	left: 0;
	right: 0;
	border-radius: 0;
	transform: none;
}
.kcc-layout-bar.kcc-pos-top    { top: 0; bottom: auto; }
.kcc-layout-bar:not(.kcc-pos-top) { bottom: 0; top: auto; }
.kcc-layout-bar .kcc-banner__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}
.kcc-layout-bar .kcc-banner__body { flex: 1 1 320px; }
.kcc-layout-bar .kcc-banner__actions { margin-top: 0; }

/* --- Layout: popup centrale --- */
.kcc-layout-popup {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	bottom: auto;
	right: auto;
}

/* --- Logo --- */
.kcc-banner__logo { margin-bottom: 12px; }
.kcc-banner__logo img {
	max-width: var(--kcc-logo-max-width, 140px);
	height: auto;
	display: block;
}

/* --- Testi --- */
.kcc-banner__title {
	margin: 0 0 8px;
	font-size: 1.25em;
	font-weight: 700;
	color: var(--kcc-text, #1d2327);
}
.kcc-banner__text { margin-bottom: 14px; }
.kcc-banner__text p { margin: 0 0 8px; }
.kcc-banner__text a,
.kcc-banner__links a {
	color: var(--kcc-link, #2563eb);
	text-decoration: underline;
}
.kcc-banner__links { font-size: 0.92em; }

/* --- Comando di chiusura (Linee guida Garante 10/6/2021) --- */
.kcc-banner__inner { position: relative; }
.kcc-banner__close {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--kcc-text, #1d2327);
	opacity: 0.55;
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	font-family: inherit;
}
.kcc-banner__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.07); }
.kcc-banner__close:focus-visible {
	opacity: 1;
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--kcc-bg, #fff), 0 0 0 5px var(--kcc-text, #1d2327);
}
/* Il titolo non deve finire sotto la X. */
.kcc-banner__title { padding-right: 30px; }

/* --- Pannello impostazioni --- */
.kcc-banner__settings {
	margin: 4px 0 14px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 12px;
	max-height: 260px;
	overflow-y: auto;
}
.kcc-banner__settings[hidden] { display: none; }
.kcc-cat {
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.kcc-cat:last-child { border-bottom: 0; }
.kcc-cat__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}
.kcc-cat__toggle {
	margin: 0;
	/* Bersaglio più grande e colore coerente col pulsante di accettazione. */
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--kcc-accept-bg, #2563eb);
}
.kcc-cat__name { flex: 1; }
.kcc-cat__badge {
	font-size: 0.75em;
	font-weight: 500;
	background: rgba(0, 0, 0, 0.07);
	border-radius: 10px;
	padding: 2px 8px;
}
.kcc-cat__desc {
	display: block;
	font-weight: 400;
	font-size: 0.9em;
	opacity: 0.8;
	margin-top: 4px;
	padding-left: 24px;
}

/* --- Pulsanti --- */
.kcc-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.kcc-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	cursor: pointer;
	font-size: 1em;
	font-weight: 600;
	font-family: inherit;
	border-radius: 7px;
	padding: 10px 18px;
	transition: opacity 0.15s ease, transform 0.05s ease;
}
.kcc-btn:hover { opacity: 0.88; }
.kcc-btn:active { transform: translateY(1px); }

/* Accetta e Rifiuta hanno la stessa base flessibile: stessa dimensione a parità
   di spazio. "Personalizza" è una terza via e resta secondaria. */
.kcc-btn--accept,
.kcc-btn--reject,
.kcc-btn--save { flex: 1 1 0; }
.kcc-btn--settings { flex: 0 1 auto; }

.kcc-btn--accept,
.kcc-btn--save {
	background: var(--kcc-accept-bg, #2563eb);
	color: var(--kcc-accept-txt, #fff);
}
.kcc-btn--reject {
	background: var(--kcc-reject-bg, #eef0f3);
	color: var(--kcc-reject-txt, #1d2327);
}
.kcc-btn--settings {
	background: var(--kcc-settings-bg, #eef0f3);
	color: var(--kcc-settings-txt, #1d2327);
}

/* --- Fuoco da tastiera ---
   Il doppio anello (prima il colore di sfondo del banner, poi quello del testo)
   garantisce che il contorno si veda sia su banner chiari sia su banner scuri,
   qualunque colore abbia il pulsante. Il contorno trasparente serve a non
   sparire nella modalità a contrasto forzato di Windows. */
.kcc-btn:focus-visible,
.kcc-cat__toggle:focus-visible,
.kcc-float-btn:focus-visible,
.kcc-manage-consent:focus-visible,
.kcc-iframe-placeholder button:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--kcc-bg, #fff), 0 0 0 5px var(--kcc-text, #1d2327);
}
/* Il contenitore riceve il fuoco all'apertura: nessun contorno, il lettore di
   schermo annuncia comunque titolo e testo tramite aria-labelledby. */
.kcc-banner:focus { outline: none; }

/* --- Overlay --- */
.kcc-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 999998;
}
.kcc-overlay[hidden] { display: none; }

/* --- Pulsante "gestisci consenso" (shortcode) --- */
.kcc-manage-consent {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--kcc-accept-bg, #2563eb);
	background: transparent;
	color: var(--kcc-accept-bg, #2563eb);
	border-radius: 8px;
	padding: 10px 18px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease;
}
.kcc-manage-consent::before {
	/* Biscotto disegnato: nessun file da caricare, eredita il colore. */
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	background: currentColor;
	border-radius: 50%;
	-webkit-mask: radial-gradient(circle 2px at 30% 32%, transparent 99%, #000 100%),
		radial-gradient(circle 1.6px at 66% 30%, transparent 99%, #000 100%),
		radial-gradient(circle 2.2px at 52% 68%, transparent 99%, #000 100%),
		radial-gradient(circle 1.4px at 26% 70%, transparent 99%, #000 100%);
	-webkit-mask-composite: source-in;
	mask: radial-gradient(circle 2px at 30% 32%, transparent 99%, #000 100%),
		radial-gradient(circle 1.6px at 66% 30%, transparent 99%, #000 100%),
		radial-gradient(circle 2.2px at 52% 68%, transparent 99%, #000 100%),
		radial-gradient(circle 1.4px at 26% 70%, transparent 99%, #000 100%);
	mask-composite: intersect;
	transition: transform 0.35s ease;
}
.kcc-manage-consent:hover {
	background: var(--kcc-accept-bg, #2563eb);
	color: var(--kcc-accept-txt, #fff);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
.kcc-manage-consent:hover::before { transform: rotate(25deg); }
.kcc-manage-consent:active { transform: translateY(1px); box-shadow: none; }

/* --- Pulsante flottante di gestione consenso --- */
.kcc-float-btn {
	position: fixed;
	bottom: 18px;
	z-index: 999990;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	/* Cerchio esatto: larghezza uguale all'altezza e nessuna spaziatura
	   laterale, altrimenti l'icona lo allarga e viene un ovale. */
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	background: var(--kcc-accept-bg, #2563eb);
	color: var(--kcc-accept-txt, #fff);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}
.kcc-float-btn {
	transition: width 0.28s ease, padding 0.28s ease, gap 0.28s ease,
		transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
/* Aprendosi torna una pastiglia, il tempo di leggere l'etichetta. */
.kcc-float-btn:hover,
.kcc-float-btn:focus-visible {
	opacity: 1;
	width: auto;
	padding: 0 18px 0 15px;
	gap: 8px;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
/* Con un'etichetta scelta a mano è una pastiglia da subito. */
.kcc-float-btn--label {
	width: auto;
	padding: 0 18px 0 15px;
	gap: 8px;
}
.kcc-float-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); }
.kcc-float-btn svg { display: block; transition: transform 0.35s ease; }
.kcc-float-btn:hover svg { transform: rotate(25deg); }

/* Solo icona: passandoci sopra si apre e mostra l'etichetta, così si
   capisce a cosa serve senza occupare spazio in permanenza. */
.kcc-float-btn__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width 0.28s ease, opacity 0.2s ease, margin 0.28s ease;
}
.kcc-float-btn:hover .kcc-float-btn__label,
.kcc-float-btn:focus-visible .kcc-float-btn__label {
	max-width: 14em;
	opacity: 1;
	margin-left: 2px;
}
/* --- Le sei posizioni del pulsante flottante --- */
.kcc-float-bottom-right { bottom: 18px; right: 18px; }
.kcc-float-bottom-left  { bottom: 18px; left: 18px; }
.kcc-float-top-right    { top: 18px; right: 18px; bottom: auto; }
.kcc-float-top-left     { top: 18px; left: 18px; bottom: auto; }
.kcc-float-middle-right { top: 50%; right: 18px; bottom: auto; transform: translateY(-50%); }
.kcc-float-middle-left  { top: 50%; left: 18px; bottom: auto; transform: translateY(-50%); }
/* A metà altezza il sollevamento va sommato al centraggio, o il pulsante salta. */
.kcc-float-middle-right:hover, .kcc-float-middle-right:focus-visible,
.kcc-float-middle-left:hover, .kcc-float-middle-left:focus-visible {
	transform: translateY(calc(-50% - 2px));
}
/* Valori precedenti, per sicurezza se la migrazione non è ancora passata. */
.kcc-float-right { bottom: 18px; right: 18px; }
.kcc-float-left { bottom: 18px; left: 18px; }

/* --- Segnaposto per iframe bloccati --- */
.kcc-iframe-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	background: #f3f4f6;
	color: #374151;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	padding: 24px;
	min-height: 180px;
	box-sizing: border-box;
}
.kcc-iframe-placeholder p { margin: 0; max-width: 420px; }
.kcc-iframe-placeholder button {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--kcc-accept-bg, #2563eb);
	color: var(--kcc-accept-txt, #fff);
	border-radius: 6px;
	padding: 9px 18px;
	font-weight: 600;
}

/* --- Come il banner entra in scena --- */
.kcc-banner.kcc-in.kcc-anim-fade  { animation: kcc-fade 0.32s ease both; }
.kcc-banner.kcc-in.kcc-anim-scale { animation: kcc-scale 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.kcc-banner.kcc-in.kcc-anim-slide { animation: kcc-slide-up 0.34s cubic-bezier(0.16, 0.8, 0.3, 1) both; }
/* Lo scorrimento parte dal bordo più vicino: dall'alto se il banner sta in
   alto, di lato se è agganciato a un angolo. */
.kcc-banner.kcc-in.kcc-anim-slide.kcc-pos-top { animation-name: kcc-slide-down; }
.kcc-banner.kcc-in.kcc-anim-slide.kcc-pos-center,
.kcc-banner.kcc-in.kcc-anim-slide.kcc-layout-popup { animation-name: kcc-slide-center; }

@keyframes kcc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kcc-scale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes kcc-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kcc-slide-down { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
/* Il popup è già centrato con translate(-50%,-50%): l'animazione deve
   partire da quella posizione, non azzerarla. */
@keyframes kcc-slide-center {
	from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
	to { opacity: 1; transform: translate(-50%, -50%); }
}
.kcc-overlay:not([hidden]) { animation: kcc-fade 0.3s ease both; }

/* --- Chi ha chiesto meno animazioni non le riceve --- */
@media (prefers-reduced-motion: reduce) {
	.kcc-btn,
	.kcc-float-btn { transition: none; }
	.kcc-btn:active { transform: none; }
	.kcc-banner.kcc-in,
	.kcc-overlay:not([hidden]) { animation: none !important; }
}

/* --- Pixel di tracciamento bloccati (1x1 invisibili: niente icona rotta) --- */
.kcc-blocked-pixel {
	display: none !important;
}

/* --- Responsive --- */
@media (max-width: 600px) {
	.kcc-banner:not(.kcc-layout-bar) {
		left: 10px;
		right: 10px;
		bottom: 10px;
		top: auto;
		width: auto;
		max-width: none;
		transform: none;
	}
	.kcc-banner__actions { flex-direction: column; }
	.kcc-btn { width: 100%; }
}