/**
 * Jannah Widgets - Jannah Button
 *
 * Structure only. Every colour, border, radius, padding and size comes from
 * the widget's controls, which Elementor writes with {{WRAPPER}} specificity,
 * so nothing here competes with the panel.
 *
 * The widget deliberately does NOT use Elementor's .elementor-button classes:
 * those pull in Elementor's button stylesheet and the Site Settings > Buttons
 * styles, which is what used to override changes made in the panel.
 */

/* Wrapper: a COLUMN flex box, so one property gives left / center / right /
   justified (stretch). */
.jw-button-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* The button */
.jw-button {
	--jw-btn-transition: 0.3s;
	--jw-icon-duration: 0.3s;
	--jw-icon-easing: ease;
	--jw-icon-hover-transform: none;
	--jannah-icon-x: 6px;
	--jannah-icon-y: 6px;

	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		color var(--jw-btn-transition),
		background-color var(--jw-btn-transition),
		border-color var(--jw-btn-transition),
		box-shadow var(--jw-btn-transition),
		transform var(--jw-btn-transition);
}

.jw-button:hover,
.jw-button:focus,
.jw-button:visited {
	text-decoration: none;
}

/* Content row: text + icon, spaced by the Icon & Text Gap control. */
.jw-button__content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.jw-button__text {
	display: inline-block;
}

/* The icon. Its font-size is the Icon Size control (default 14px). */
.jw-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
	line-height: 1;
	transform-origin: center center;
	transition: transform var(--jw-icon-duration) var(--jw-icon-easing), color var(--jw-btn-transition);
}

.jw-button__icon i {
	display: block;
	font-size: inherit;
	line-height: 1;
	color: inherit;
}

.jw-button__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	transform-box: fill-box;
	transform-origin: center center;
}

/* Icon colouring: always the current colour, on fill OR stroke. The colour
   controls only ever set `color`, so all icon shapes follow them. */
.jw-button__icon--fill svg,
.jw-button__icon--fill svg * {
	fill: currentColor;
	stroke: none;
}

.jw-button__icon--stroke svg,
.jw-button__icon--stroke svg * {
	fill: none;
	stroke: currentColor;
}

/* Icon-only hover animation (transform chosen in Style > Icon). */
.jw-button:hover .jw-button__icon,
.jw-button:focus-visible .jw-button__icon {
	transform: var(--jw-icon-hover-transform);
}

/* Keyboard focus ring. */
.jw-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.jw-button,
	.jw-button__icon {
		transition: none;
	}

	.jw-button:hover .jw-button__icon,
	.jw-button:focus-visible .jw-button__icon {
		transform: none;
	}
}

.elementor-editor-active .jw-button {
	cursor: default;
}