.wp-block-acf-kf-buttons,
.wp-block-acf-kf-buttons > .acf-innerblocks-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}

/* ------------------------------------------------------------------ */
/*  Child-item constraints                                            */
/* ------------------------------------------------------------------ */

.wp-block-acf-kf-buttons > .wp-block-acf-kf-button,
.wp-block-acf-kf-buttons > .acf-innerblocks-container > .wp-block-acf-kf-button {
	flex-grow: 0;
	max-width: 100%;
}



.wp-block-acf-kf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	transition: all 0.2s ease;
}

.wp-block-acf-kf-button:has(a.kf-button__link) {
	cursor: pointer;
}

.wp-block-acf-kf-button .kf-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;

	font-family: 'Degular';
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;

	gap: 10px;
}

/* Stretched link — entire wrapper becomes clickable */
.wp-block-acf-kf-button a.kf-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-acf-kf-button .kf-button__icon {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex-shrink: 0;
	pointer-events: none;
}



.wp-block-acf-kf-button {
	padding: 18px 24px;
	border-radius: 50vw;
	text-decoration: none;

	transition: all 0.3s ease;
}

.wp-block-acf-kf-button.is-style-fill,
.wp-block-acf-kf-button.is-style-fill-secondary,
.wp-block-acf-kf-button:not([class*="is-style-"]) {
	background-color: #1A1A1A;
	color: #ffffff;
	border: none;
}

.wp-block-acf-kf-button.is-style-fill-secondary {
	background-color: #5F61FF;
}

.wp-block-acf-kf-button.is-style-outline {
	background-color: transparent;
	color: #0073aa;
	border: 2px solid currentColor;
}


.wp-block-acf-kf-button.is-style-glass {
	--c-light: #ffffff8c;
	--c-dark: #ffffff24;

	--glass-reflex-dark: 1;
	--glass-reflex-light: 1;
	
	--saturation: 150%;

	background-color: #ffffff08;
	backdrop-filter: blur(8px) saturate(var(--saturation));
	-webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
	box-shadow: inset 0 0 0 1px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
	transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);
}

.wp-block-acf-kf-button:hover,
.wp-block-acf-kf-button:active {
	background-color: #5f61ff;
}

.wp-block-acf-kf-button:active {
	/* filter: brightness(0.95); */
}

.wp-block-acf-kf-button.is-style-fill-secondary:hover,
.wp-block-acf-kf-button.is-style-fill-secondary:active {
	opacity: 0.85;
	transform: translateY(-1px);
}

.wp-block-acf-kf-button.is-style-glass:hover,
.wp-block-acf-kf-button.is-style-glass:active {
	--c-light: #ffffffa5;
	--c-dark: #ffffff3d;
	background-color: #ffffff35;
}

.page-template-single-gutenberg .wp-block-acf-kf-button.is-style-glass {
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}
.page-template-single-gutenberg .wp-block-acf-kf-button.is-style-glass:first-child {
	border: 3px solid #FFFFFF;
	transition: all 0.3s ease;
	padding: 15px 24px;
}

.page-template-single-gutenberg .wp-block-acf-kf-button.is-style-glass:first-child a::after {
	content: url('data:image/svg+xml,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.6119 13.8652V0.865234H0.611908" stroke="white" stroke-width="1.73077" stroke-miterlimit="10"/><path d="M13.6119 0.865234L0.611908 13.8652" stroke="white" stroke-width="1.73077" stroke-miterlimit="10"/></svg>');
	position: relative;
}

.page-template-single-gutenberg .wp-block-acf-kf-button.is-style-glass:last-child a::after {
	content: url('data:image/svg+xml,<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M26 52C40.3594 52 52 40.3594 52 26C52 11.6406 40.3594 0 26 0C11.6406 0 0 11.6406 0 26C0 40.3594 11.6406 52 26 52Z" fill="%235F61FF"/><path d="M26 0C20.8577 0 15.8309 1.52487 11.5552 4.38178C7.27953 7.2387 3.94702 11.2993 1.97915 16.0502C0.0112654 20.801 -0.503621 26.0288 0.499594 31.0723C1.50281 36.1158 3.97907 40.7485 7.61524 44.3847C11.2514 48.0208 15.8842 50.4971 20.9277 51.5003C25.9711 52.5038 31.1989 51.9886 35.9498 50.0208C40.7007 48.0529 44.7613 44.7204 47.6182 40.4447C50.4752 36.169 52 31.1423 52 25.9999C52 22.5856 51.3275 19.2046 50.0209 16.0502C48.7142 12.8957 46.7991 10.0295 44.3848 7.61523C41.9704 5.20087 39.1043 3.28575 35.9498 1.97913C32.7953 0.672509 29.4144 0 26 0ZM20.8 37.6999V14.3L36.4 25.9999L20.8 37.6999Z" fill="white"/></svg>');
}


.wp-block-acf-kf-button:has(.kf-button__link:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wp-block-acf-kf-button .kf-button__link:focus {
	outline: none;
}

.wp-block-acf-kf-button .kf-button__link:focus-visible {
	outline: none;
}

.page-template-single-gutenberg .wp-block-acf-kf-button.is-style-glass:first-child:hover {
	background-color: #1A1A1A;
	border-color: #1A1A1A;
}

.wp-block-acf-kf-button .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}