/**
 * Vellis Button widget styles.
 *
 * Defaults here mirror the design spec exactly so the widget renders
 * pixel-perfect out of the box; every value is overridable from Elementor.
 *
 * Spec: Inter 500 / 16px / 20px line-height / uppercase, 1.5px solid #265154
 * border, 35px radius, 12px 16px 12px 24px padding, 8px gap, #113F42 text.
 */

.vellis-button-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.vellis-button {
	/* Layout */
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;

	/* Spacing */
	padding: 12px 16px 12px 24px;

	/* Shape */
	border: 1.5px solid #265154;
	border-radius: 35px;
	background-color: transparent;

	/* Typography defaults (group control can override) */
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;

	/* Color */
	color: #113F42;

	/* Interaction */
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	user-select: none;
	transition-property: color, background-color, border-color, box-shadow, transform;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.vellis-button:focus {
	outline: none;
}

.vellis-button:focus-visible {
	outline: 2px solid #265154;
	outline-offset: 2px;
}

/* Keep label color in sync with the button color by default */
.vellis-button .vellis-button__text {
	display: inline-block;
	color: inherit;
	transition: color 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Icon wrapper */
.vellis-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #113F42;
	transition-property: transform, color;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.vellis-button__icon svg,
.vellis-button__icon img {
	display: block;
	width: 24px;
	height: 24px;
}

.vellis-button__icon svg {
	color: inherit;
}

/* The default arrow uses currentColor strokes */
.vellis-icon--arrow path {
	stroke: currentColor;
}

/* ------------------------------------------------------------------ *
 * Hover state (defaults — fill teal, white text, arrow slides up-right)
 * ------------------------------------------------------------------ */

.vellis-button:hover,
.vellis-button:focus {
	background-color: #265154;
	border-color: #265154;
	color: #FFFFFF;
}

.vellis-button:hover .vellis-button__text,
.vellis-button:focus .vellis-button__text {
	color: #FFFFFF;
}

.vellis-button:hover .vellis-button__icon,
.vellis-button:focus .vellis-button__icon {
	color: #FFFFFF;
}

/* ------------------------------------------------------------------ *
 * Icon hover motion variants (prefix_class: vellis-icon-motion--)
 * ------------------------------------------------------------------ */

.vellis-icon-motion--diagonal .vellis-button:hover .vellis-button__icon,
.vellis-icon-motion--diagonal .vellis-button:focus .vellis-button__icon {
	transform: translate(3px, -3px);
}

.vellis-icon-motion--right .vellis-button:hover .vellis-button__icon,
.vellis-icon-motion--right .vellis-button:focus .vellis-button__icon {
	transform: translateX(4px);
}

.vellis-icon-motion--up .vellis-button:hover .vellis-button__icon,
.vellis-icon-motion--up .vellis-button:focus .vellis-button__icon {
	transform: translateY(-4px);
}

.vellis-icon-motion--rotate .vellis-button:hover .vellis-button__icon,
.vellis-icon-motion--rotate .vellis-button:focus .vellis-button__icon {
	transform: rotate(45deg);
}

/* ------------------------------------------------------------------ *
 * Icon-only on mobile (prefix_class: vellis-button--icon-only-mobile)
 * On phones the label is hidden and the pill collapses to a compact,
 * symmetric icon button. !important is required to override Elementor's
 * generated padding shorthand on the button element.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.vellis-button--icon-only-mobile .vellis-button__text {
		display: none;
	}

	.vellis-button--icon-only-mobile .vellis-button {
		gap: 0 !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}

/* ------------------------------------------------------------------ *
 * Full-width alignment option
 * ------------------------------------------------------------------ */

.vellis-button-wrapper.vellis-button-wrapper {
	width: 100%;
}

.vellis-button-wrapper[style*="align-items: stretch"] .vellis-button,
.vellis-button-wrapper[data-align="justify"] .vellis-button {
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Reduced motion accessibility
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.vellis-button,
	.vellis-button__icon,
	.vellis-button .vellis-button__text {
		transition: none !important;
	}

	.vellis-button:hover .vellis-button__icon,
	.vellis-button:focus .vellis-button__icon {
		transform: none !important;
	}
}