/**
 * Arbor Law — Button variants
 * Applied automatically when the "Arbor Background Context" dropdown is set
 * on any Elementor Button widget. Can also be used manually via CSS class.
 *
 *   al-btn al-btn--on-dark   → cream pill, dark text (for dark backgrounds)
 *   al-btn al-btn--on-light  → dark green pill, cream text (for light backgrounds)
 */

.al-btn .elementor-button {
	padding: 8px 8px 8px 28px;
	border-radius: 999px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px !important;
	border: none !important;
	/* Typography bound to the kit's "Buttons" global (id: f720221) so global edits cascade */
	font-family: var(--e-global-typography-f720221-font-family, Satoshi), sans-serif !important;
	font-weight: var(--e-global-typography-f720221-font-weight, 500) !important;
	font-size: var(--e-global-typography-f720221-font-size, 16px) !important;
	line-height: var(--e-global-typography-f720221-line-height, 16px) !important;
	letter-spacing: var(--e-global-typography-f720221-letter-spacing, 0.5px) !important;
	text-transform: var(--e-global-typography-f720221-text-transform, none) !important;
	transition: background .25s ease, color .25s ease;
}

.al-btn .elementor-button-content-wrapper {
	gap: 14px;
	display: inline-flex;
	align-items: center;
}

.al-btn .elementor-button-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-size: 14px;
	flex-shrink: 0;
}

.al-btn .elementor-button-icon svg {
	width: 14px;
	height: 14px;
}

/* On dark bg → cream pill with dark text */
.al-btn--on-dark .elementor-button {
	background: #F2F1ED !important;
	color: #10555A !important;
}
.al-btn--on-dark .elementor-button .elementor-button-icon {
	background: rgba(16,85,90,0.12) !important;
	color: rgba(16,85,90,0.85) !important;
}
.al-btn--on-dark .elementor-button .elementor-button-icon svg {
	fill: rgba(16,85,90,0.85) !important;
}
.al-btn--on-dark .elementor-button:hover,
.al-btn--on-dark .elementor-button:focus {
	background: #FFFFFF !important;
	color: #10555A !important;
}
.al-btn--on-dark .elementor-button:hover .elementor-button-icon {
	background: #10555A !important;
	color: #F2F1ED !important;
}
.al-btn--on-dark .elementor-button:hover .elementor-button-icon svg {
	fill: #F2F1ED !important;
}

/* On light bg → dark green pill with cream text */
.al-btn--on-light .elementor-button {
	background: #10555A !important;
	color: #F2F1ED !important;
}
.al-btn--on-light .elementor-button .elementor-button-icon {
	background: rgba(242,241,237,0.18) !important;
	color: #F2F1ED !important;
}
.al-btn--on-light .elementor-button .elementor-button-icon svg,
.al-btn--on-light .elementor-button .elementor-button-icon svg *,
.al-btn--on-light .elementor-button[type="submit"] svg,
.al-btn--on-light .elementor-button[type="submit"] svg * {
	fill: #F2F1ED !important;
}
.al-btn--on-light .elementor-button:hover,
.al-btn--on-light .elementor-button:focus {
	background: #0D4247 !important;
	color: #FFFFFF !important;
}
.al-btn--on-light .elementor-button:hover .elementor-button-icon {
	background: #F2F1ED !important;
	color: var(--e-global-color-primary, #10555A) !important;
}
.al-btn--on-light .elementor-button:hover .elementor-button-icon svg,
.al-btn--on-light .elementor-button:hover .elementor-button-icon svg *,
.al-btn--on-light .elementor-button[type="submit"]:hover svg,
.al-btn--on-light .elementor-button[type="submit"]:hover svg * {
	fill: var(--e-global-color-primary, #10555A) !important;
}

/* Back-compat alias for legacy .al-explore-btn usage */
.al-explore-btn .elementor-button {
	padding: 8px 8px 8px 28px !important;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #F2F1ED !important;
	color: #10555A !important;
}
.al-explore-btn .elementor-button-icon {
	width: 36px;
	height: 36px;
	background: rgba(16,85,90,0.12);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(16,85,90,0.85);
	margin: 0;
	font-size: 14px;
}
.al-explore-btn .elementor-button-icon svg {
	width: 14px;
	height: 14px;
	fill: rgba(16,85,90,0.85);
}