/**
 * MON PORTE — Reusable components (global, content scope).
 *
 * Small premium UI primitives for UX Builder sections (e.g. the ALMA
 * homepage block). Scoped strictly to mp-* classes — never global
 * Flatsome elements. Per-instance options arrive as CSS custom
 * properties on each .mp-button; layoutBase lives here.
 */

/* ------------------------------------------------------------------ */
/* MON PORTÉ Button (UX Builder element "MON PORTÉ Button").          */
/* ------------------------------------------------------------------ */

.mp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 14px;
	min-height: 46px;
	padding: 6px 6px 6px 26px;
	border-style: solid;
	border-radius: 999px;
	background-color: var(--mp-btn-bg, #1f1e1b);
	color: var(--mp-btn-color, #ffffff);
	border-color: var(--mp-btn-border, #1f1e1b);
	font-weight: var(--mp-btn-weight, 600);
	text-transform: var(--mp-btn-transform, uppercase);
	text-decoration: none;
	transition-property: background-color, border-color, color;
	transition-duration: var(--mp-btn-transition, 150ms);
	transition-timing-function: ease;
}

.mp-button--full {
	width: 100%;
}

.mp-button:hover {
	background-color: var(--mp-btn-hover-bg, #60373d);
	color: var(--mp-btn-hover-color, #ffffff);
	border-color: var(--mp-btn-hover-border, #60373d);
}

.mp-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.mp-button-text {
	display: inline-block;
}

/* Icon container: circle / rounded square / none. */
.mp-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	line-height: 1;
	background-color: var(--mp-btn-icon-bg, #ffffff);
	color: var(--mp-btn-icon-color, #1f1e1b);
	transition-property: background-color, color;
	transition-duration: var(--mp-btn-transition, 150ms);
	transition-timing-function: ease;
}

.mp-button-icon--circle {
	border-radius: 50%;
}

.mp-button-icon--rounded {
	border-radius: 22%;
}

.mp-button-icon--none {
	background-color: transparent;
}

.mp-button:hover .mp-button-icon {
	background-color: var(--mp-btn-icon-bg-hover, #ffffff);
	color: var(--mp-btn-icon-hover, #60373d);
}

.mp-button:hover .mp-button-icon--none {
	background-color: transparent;
}

/* Tight viewports: keep pill inline, let spacing breathe down. */
@media (max-width: 549px) {
	.mp-button {
		column-gap: 10px;
		padding-left: 20px;
	}
}

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