/* ==========================================================================
   Canvas Compatibility — Plugin CSS Overrides
   ========================================================================== */

/* ── Elementor ─────────────────────────────────────────────────────────── */

/* Remove default block padding from Elementor containers */
.e-con {
	--padding-inline-start: 0 !important;
	--padding-inline-end: 0 !important;
}

/* ── Button Shadow ────────────────────────────────────────────────────── */

/*
 * style.css defines .button-shadow-dark and .button-shadow-contrast but not
 * .button-shadow-light. Add the missing light variant here.
 */
.button-shadow-light {
	--cnvs-btn-shadow-color: rgba(255, 255, 255, 0.6);
}

/* ── Button SVG Icon Support ──────────────────────────────────────────── */

/*
 * style.css targets <i> for button icon margin and effects.
 * Elementor renders SVG icons when FA SVG mode is enabled, which also
 * triggers on PHP re-renders (e.g. switching to Advanced tab in the editor).
 * Mirror every .button i rule to .button svg so both render identically.
 */

.button svg {
	display: inline-block;
	position: relative;
	margin-right: calc(var(--cnvs-btn-icon-margin) + var(--cnvs-btn-icon-margin-offset));
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

.button.text-end svg {
	margin: 0 0 0 calc(var(--cnvs-btn-icon-margin) + var(--cnvs-btn-icon-margin-offset));
}

/* Icon effect extra offset — mirrors .button-icon-effect i */
.button-icon-effect svg {
	--cnvs-btn-icon-margin-offset: .25rem;
}

/* Flip-X: horizontal slide animation — mirrors .button-icon-effect.button-icon-flip-x i */
.button-icon-effect.button-icon-flip-x svg {
	animation: buttonIconSlideBack 0.3s ease;
}
.button-icon-effect.button-icon-flip-x:hover svg {
	animation: buttonIconSlideFront 0.5s forwards;
}

/* Flip-Y: vertical slide animation — mirrors .button-icon-effect.button-icon-flip-y i */
.button-icon-effect.button-icon-flip-y svg {
	animation: buttonIconSlideUp 0.3s ease;
}
.button-icon-effect.button-icon-flip-y:hover svg {
	animation: buttonIconSlideDown 0.5s forwards;
}

/* ── Custom Social Links ──────────────────────────────────────────────── */

/* Hover color from repeater brand color custom property */
.canvas-social-custom:hover {
	background-color: var(--cnvs-social-color) !important;
	color: #fff !important;
}

/* ── Button Shadow — Elementor Override ───────────────────────────────────── */

/*
 * Elementor injects `.elementor a { box-shadow: none; }` globally.
 * That rule has specificity (0,1,1) which beats `.button-shadow` (0,1,0),
 * resetting box-shadow on all Canvas shadow buttons rendered as <a> tags.
 * Restore with a (0,3,0) rule that wins the cascade.
 */
.elementor .button.button-shadow {
	box-shadow: var(--cnvs-btn-shadow-size, 4px) var(--cnvs-btn-shadow-size, 4px) 0px 0px var(--cnvs-btn-shadow-color, rgba(0, 0, 0, 0.2));
}
.elementor .button.button-shadow:hover {
	box-shadow: none;
}