.karilon-consent[hidden],
.karilon-consent-preferences[hidden] {
	display: none !important;
}

.karilon-consent {
	position: fixed;
	z-index: 99990;
	right: 1.25rem;
	bottom: 1.25rem;

	width: min(540px, calc(100vw - 2rem));
}

.karilon-consent__banner {
	padding: 1.5rem;

	color: #1c1c1c;
	background: #fff;

	border:
		1px solid rgba(28, 28, 28, 0.12);

	border-radius: 18px;

	box-shadow:
		0 22px 60px rgba(28, 28, 28, 0.18);
}

.karilon-consent__title {
	margin:
		0
		0
		0.65rem;

	font-family:
		inherit;

	font-size: 1.35rem;
	line-height: 1.2;
}

.karilon-consent__description {
	margin: 0;

	font-size: 0.96rem;
	line-height: 1.6;
}

.karilon-consent__policy {
	margin:
		0.75rem
		0
		0;
}

.karilon-consent__policy a {
	color: inherit;

	font-size: 0.9rem;
	font-weight: 600;

	text-underline-offset: 0.18em;
}

.karilon-consent__actions {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 0.65rem;

	margin-top: 1.25rem;
}

.karilon-consent__button {
	min-height: 46px;

	padding:
		0.75rem
		0.9rem;

	border-radius: 10px;

	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;

	cursor: pointer;

	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

.karilon-consent__button--primary {
	color: #fff;

	background: #c68c48;

	border:
		1px solid #c68c48;
}

.karilon-consent__button--secondary {
	color: #9a642e;

	background: #fff;

	border:
		1px solid #c68c48;
}

.karilon-consent__button:hover {
	transform: translateY(-1px);
}

.karilon-consent__button--primary:hover {
	background: #a46e38;
	border-color: #a46e38;
}

.karilon-consent__button--secondary:hover {
	color: #fff;

	background: #c68c48;
}

.karilon-consent__button:focus-visible,
.karilon-consent-preferences__close:focus-visible,
.karilon-consent-switch input:focus-visible
+ .karilon-consent-switch__track {
	outline:
		3px solid rgba(198, 140, 72, 0.36);

	outline-offset: 3px;
}


/* =========================================================
   PREFERENZE
   ========================================================= */

.karilon-consent-preferences {
	position: fixed;
	z-index: 99999;

	inset: 0;

	display: grid;

	place-items: center;

	padding: 1rem;
}

.karilon-consent-preferences__backdrop {
	position: absolute;

	inset: 0;

	background:
		rgba(17, 17, 17, 0.58);
}

.karilon-consent-preferences__panel {
	position: relative;
	z-index: 1;

	width:
		min(640px, 100%);

	max-height:
		min(760px, calc(100vh - 2rem));

	overflow: auto;

	color: #1c1c1c;
	background: #fff;

	border-radius: 20px;

	box-shadow:
		0 28px 80px rgba(0, 0, 0, 0.28);
}

.karilon-consent-preferences__header {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 1rem;

	padding:
		1.35rem
		1.5rem;

	border-bottom:
		1px solid rgba(28, 28, 28, 0.1);
}

.karilon-consent-preferences__title {
	margin: 0;

	font-family: inherit;

	font-size: 1.5rem;
	line-height: 1.2;
}

.karilon-consent-preferences__close {
	display: grid;

	flex: 0 0 auto;

	width: 40px;
	height: 40px;

	place-items: center;

	padding: 0;

	color: #1c1c1c;
	background: transparent;

	border:
		1px solid rgba(28, 28, 28, 0.14);

	border-radius: 999px;

	font-size: 1.6rem;
	line-height: 1;

	cursor: pointer;
}

.karilon-consent-preferences__body {
	padding:
		0
		1.5rem;
}

.karilon-consent-category {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		auto;

	gap: 1.25rem;

	align-items: center;

	padding:
		1.35rem
		0;

	border-bottom:
		1px solid rgba(28, 28, 28, 0.09);
}

.karilon-consent-category:last-child {
	border-bottom: 0;
}

.karilon-consent-category__copy h3 {
	margin:
		0
		0
		0.35rem;

	font-family: inherit;

	font-size: 1.05rem;
	line-height: 1.3;
}

.karilon-consent-category__copy p {
	margin: 0;

	color:
		rgba(28, 28, 28, 0.7);

	font-size: 0.9rem;
	line-height: 1.55;
}

.karilon-consent-preferences__footer {
	display: flex;

	justify-content: flex-end;

	gap: 0.75rem;

	padding:
		1.25rem
		1.5rem;

	background:
		#faf8f5;

	border-top:
		1px solid rgba(28, 28, 28, 0.08);
}


/* =========================================================
   SWITCH
   ========================================================= */

.karilon-consent-switch {
	position: relative;

	display: inline-flex;

	flex: 0 0 auto;
}

.karilon-consent-switch input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
}

.karilon-consent-switch__track {
	position: relative;

	display: block;

	width: 48px;
	height: 26px;

	background:
		#d5d5d5;

	border-radius: 999px;

	cursor: pointer;

	transition:
		background-color 160ms ease;
}

.karilon-consent-switch__track::after {
	content: "";

	position: absolute;

	top: 3px;
	left: 3px;

	width: 20px;
	height: 20px;

	background: #fff;

	border-radius: 50%;

	box-shadow:
		0 2px 7px rgba(0, 0, 0, 0.18);

	transition:
		transform 160ms ease;
}

.karilon-consent-switch
input:checked
+ .karilon-consent-switch__track {
	background:
		#c68c48;
}

.karilon-consent-switch
input:checked
+ .karilon-consent-switch__track::after {
	transform:
		translateX(22px);
}

.karilon-consent-switch
input:disabled
+ .karilon-consent-switch__track {
	cursor: default;

	opacity: 0.72;
}

html.karilon-consent-is-open {
	overflow: hidden;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

	.karilon-consent {
		right: 0.75rem;
		bottom: 0.75rem;

		width:
			calc(100vw - 1.5rem);
	}

	.karilon-consent__banner {
		padding: 1.2rem;
	}

	.karilon-consent__actions {
		grid-template-columns: 1fr;
	}

	.karilon-consent-preferences {
		align-items: end;

		padding: 0;
	}

	.karilon-consent-preferences__panel {
		width: 100%;

		max-height:
			88vh;

		border-radius:
			20px
			20px
			0
			0;
	}

	.karilon-consent-category {
		align-items: start;
	}

	.karilon-consent-preferences__footer {
		flex-direction: column;
	}

	.karilon-consent-preferences__footer
	.karilon-consent__button {
		width: 100%;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.karilon-consent__button,
	.karilon-consent-switch__track,
	.karilon-consent-switch__track::after {
		transition: none;
	}

	.karilon-consent__button:hover {
		transform: none;
	}
}

/* =========================================================
   TESTO INTRODUTTIVO PREFERENZE
   ========================================================= */

.karilon-consent-preferences__intro {
	padding:
		1.2rem
		0
		0.15rem;
}

.karilon-consent-preferences__intro > p:first-child {
	margin: 0;

	color:
		rgba(28, 28, 28, 0.7);

	font-size: 0.92rem;
	line-height: 1.55;
}

.karilon-consent-preferences__intro .karilon-consent__policy {
	margin-top: 0.6rem;
}
