/*
 * Cookie settings float button
 * Stacks ABOVE the accessibility float (offset + size + 8px), physical left.
 */

.mahut-cookie-float-btn {
	position: fixed;
	left: var(--float-btn-side, 16px);

	bottom: calc(
		var(--float-btn-offset-bottom, 20px) +
		var(--float-btn-size, 44px) +
		8px
	);

	z-index: 99998;

	width: var(--float-btn-size, 44px);
	height: var(--float-btn-size, 44px);
	padding: 0;

	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: var(--float-btn-bg, #000000);
	color: var(--float-btn-color, #ffffff);

	transition: transform 0.15s ease;
}

.mahut-cookie-float-btn:hover,
.mahut-cookie-float-btn:focus {
	transform: scale(1.05);
	background-color: var(--float-btn-bg, #000000);
	color: var(--float-btn-color, #ffffff);
}

.mahut-cookie-float-btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #000000;
}

.mahut-cookie-float-btn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
}

/* The float only re-opens the banner, so it is redundant while the banner or
   its preferences panel is on screen (hidden state is the an-delay class). */
body:has(#an-18174:not(.an-delay)) .mahut-cookie-float-btn,
body:has(#an-manage-cookies-notification-18174:not(.an-delay)) .mahut-cookie-float-btn {
	display: none;
}

/* Elementor tablet breakpoint and below. */
@media (max-width: 1024px) {
	/* App pages: above the 74px sticky checkout bar (same rule as pojo-a11y-custom.css). */
	body.elementor-template-canvas {
		--float-btn-offset-bottom: 86px;
	}

	.mahut-cookie-float-btn {
		width: 48px;
		height: 48px;

		bottom: calc(
			var(--float-btn-offset-bottom, 12px) +
			48px +
			8px
		);
	}

	.mahut-cookie-float-btn svg {
		width: 20px;
		height: 20px;
	}
}

/* Cookie consent (Advanced Notifications 18174) as a compact bottom bar on phones.
   Same content and behaviour: short title, privacy-policy link, accept / reject / manage. */
@media (max-width: 767px) {
	#an-location-bottom_right {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: none !important;
		padding: 0 !important;
	}

	#an-18174.an-cookie-consent {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		border-radius: 14px 14px 0 0 !important;
		padding: 10px 14px 10px !important;
	}

	#an-18174 .an-close-container {
		top: 4px !important;
		left: 4px !important;
		transform: scale(0.8);
	}

	#an-18174 .an-content {
		padding: 0 !important;
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 8px;
	}

	#an-18174 .an-cookies-content {
		width: 100%;
		margin: 0 0 2px !important;
		padding-left: 30px;
	}

	#an-18174 .an-cookies-title-default {
		display: inline;
		font-size: 14px !important;
		line-height: 1.4 !important;
		margin: 0 !important;
	}

	/* The long explanation is hidden on phones; its privacy-policy link stays. */
	#an-18174 .an-cookies-content > div:not([class]) {
		display: inline;
		font-size: 0 !important;
		line-height: 0 !important;
		margin: 0 !important;
	}

	#an-18174 .an-cookies-content > div:not([class]) a {
		font-size: 13px !important;
		line-height: 1.4 !important;
		margin-inline-start: 6px;
		white-space: nowrap;
	}

	#an-18174 .an-accept-cookies,
	#an-18174 .an-reject-cookies {
		flex: 1 1 0;
		width: auto !important;
		margin: 0 !important;
		padding: 7px 8px !important;
		font-size: 14px !important;
	}

	#an-18174 .an-manage-cookies {
		flex: 0 0 100%;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 12px !important;
		background: none !important;
		box-shadow: none !important;
	}

	/* While the bar is open, lift the accessibility button above it. */
	body:has(#an-18174:not(.an-delay)) .pojo-a11y-float-btn {
		bottom: 150px;
	}
}