/* The free CookieYes preference panel uses a fixed 845px inner width. Keep it
   within narrow viewports so category controls and actions remain reachable. */
@media (max-width: 900px) {
	.cky-modal {
		box-sizing: border-box !important;
		width: calc(100vw - 24px) !important;
		max-width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 24px) !important;
	}

	.cky-modal .cky-preference-center {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		max-height: calc(100vh - 24px) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}
}

@media (max-width: 576px) {
	.cky-modal {
		width: calc(100vw - 16px) !important;
		max-width: calc(100vw - 16px) !important;
		max-height: calc(100vh - 16px) !important;
		left: 50% !important;
	}

	.cky-modal .cky-preference-center {
		max-height: calc(100vh - 16px) !important;
	}

	.cky-prefrence-btn-wrapper {
		gap: 8px !important;
		padding: 12px !important;
	}

	.cky-prefrence-btn-wrapper .cky-btn {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}
}


/* CookieYes renders its preference center as a root node, not inside .cky-modal.
   Constrain that actual root and its contents on tablet and mobile widths. */
@media (max-width: 900px) {
	#ckyPreferenceCenter {
		box-sizing: border-box !important;
		position: fixed !important;
		left: 50% !important;
		right: auto !important;
		width: min(845px, calc(100vw - 24px)) !important;
		max-width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 24px) !important;
		transform: translate(-50%, -50%) !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}
	#ckyPreferenceCenter > *,
	#ckyPreferenceCenter .cky-preference-center {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}
}