/* =========================================================
   BLUMI BUTTON
   ========================================================= */

.blumi-button-widget {

	display: flex;

	width: 100%;

}


/* ---------------------------------------------------------
   Button
   --------------------------------------------------------- */

.blumi-button {

	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 14px;

	width: auto;

	margin: 0;

	padding: 16px 28px;

	border:
		3px solid #A5ADD8;

	border-radius: 40px;

	background: transparent;

	color: #A5ADD8;

	font-family:
		var(
			--blumi-font-primary,
			"bc-novatica-cyr",
			sans-serif
		);

	font-size: 18px;
	font-weight: 700;
	font-style: normal;

	line-height: 1;

	letter-spacing: 0;

	text-align: center;

	text-transform: uppercase;

	text-decoration: none;

	white-space: nowrap;

	cursor: pointer;

	transition:
		background-color .3s ease,
		color .3s ease,
		border-color .3s ease,
		transform .3s ease;

}


/* ---------------------------------------------------------
   Icon
   --------------------------------------------------------- */

.blumi-button__icon {

	display: block;

	flex: 0 0 auto;

	width: 27px!important;
  height: 15px!important;

	background: currentColor;

	-webkit-mask-image:
		var(--blumi-icon);

	mask-image:
		var(--blumi-icon);

	-webkit-mask-repeat:
		no-repeat;

	mask-repeat:
		no-repeat;

	-webkit-mask-position:
		center;

	mask-position:
		center;

	-webkit-mask-size:
		contain;

	mask-size:
		contain;

}


/* ---------------------------------------------------------
   Hover
   --------------------------------------------------------- */

.blumi-button:hover {

	background: #A5ADD8;

	border-color: #A5ADD8;

	color: #401F0F;

	text-decoration: none;

	transform:
		translateY(-1px);

}


/* ---------------------------------------------------------
   Focus accessibility
   --------------------------------------------------------- */

.site
.blumi-button:focus {

	background: inherit;

	color: inherit;

}


.site
.blumi-button:focus-visible,
.blumi-button:focus-visible {

	outline:
		2px solid currentColor;

	outline-offset: 4px;

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

	.blumi-button {

		max-width: 100%;

		font-size: 14px;

		white-space: normal;

	}
	
	.blumi-button {
		font-size: 14px;
		text-align: left;
	  }

}


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

@media (prefers-reduced-motion: reduce) {

	.blumi-button {

		transition: none !important;

	}

}