/* VDD Image Button v1.1.0 */

.vdd-imgbtn-wrap {
	line-height: 0;
}

.vdd-imgbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	line-height: 1.2;
	transition: transform var(--vdd-imgbtn-duration, 300ms) ease;
	will-change: transform;
}

/* --- Image layers (two-image crossfade mode) --- */
.vdd-imgbtn__layer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: var(--vdd-imgbtn-fit, 100% 100%);
	transition: opacity var(--vdd-imgbtn-duration, 300ms) ease;
	pointer-events: none;
	z-index: 0;
}

.vdd-imgbtn__layer--hover {
	opacity: 0;
	z-index: 1;
}

.vdd-imgbtn:hover .vdd-imgbtn__layer--hover,
.vdd-imgbtn:focus .vdd-imgbtn__layer--hover {
	opacity: 1;
}

/* --- Mask layer (single-image tint mode) --- */
.vdd-imgbtn__mask {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: var(--vdd-imgbtn-fit, 100% 100%);
	mask-size: var(--vdd-imgbtn-fit, 100% 100%);
	transition: background-color var(--vdd-imgbtn-duration, 300ms) ease;
	pointer-events: none;
	z-index: 0;
}

/* --- Content (icon + text) --- */
.vdd-imgbtn__content {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transform: translate(var(--vdd-imgbtn-offset-x, 0px), var(--vdd-imgbtn-offset-y, 0px));
}

.vdd-imgbtn__text {
	white-space: nowrap;
	transition: color var(--vdd-imgbtn-duration, 300ms) ease;
}

.vdd-imgbtn__icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.vdd-imgbtn__icon i,
.vdd-imgbtn__icon svg {
	transition: color var(--vdd-imgbtn-duration, 300ms) ease, fill var(--vdd-imgbtn-duration, 300ms) ease;
}

/* Map the "stretch" fit keyword to 100% 100% */
.elementor-widget-vdd_image_button {
	--vdd-imgbtn-fit: 100% 100%;
}