/* =========================
   BUTTONS
========================= */

.ff-btn,
.btn {
	display: inline-flex;
	align-items: center !important;
	justify-content: center;
	padding: 14px 36px;
	border-radius: 999px !important;
	font-size: 1.125rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer !important;
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease,
		transform 0.2s ease,
		box-shadow 0.3s ease !important;
	border: 2px solid transparent !important;
	min-width: 180px;
	white-space: normal !important;
}

.ff-btn::after,
.btn::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 8px;
	margin-left: 10px;

	background-color: currentColor;

	-webkit-mask: url("../images/arrow.svg") no-repeat center;
	mask: url("../images/arrow.svg") no-repeat center;

	-webkit-mask-size: contain;
	mask-size: contain;
}

/* =========================
   PURPLE BUTTON
========================= */

/* Default: filled purple */
.btn-white {
	background-color: transparent !important;
	color: #fff !important;
	border-color: #fff !important;
}
.btn-secondary {
	background-color: var(--color-secondary) !important;
	color: #fff !important;
	border-color: var(--color-secondary) !important;
}

/* Hover: outlined purple */
.btn-secondary:hover {
	background-color: transparent !important;
	color: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
}

/* =========================
   PURPLE OUTLINE BUTTON
========================= */

/* Default: outlined purple */
.btn-secondary-outline {
	background-color: transparent !important;
	color: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
}

/* Hover: filled purple */
.btn-secondary-outline:hover {
	background-color: var(--color-secondary) !important;
	color: #fff !important;
}

/* =========================
   ORANGE BUTTON
========================= */

/* Default: filled orange */
.ff-btn,
.btn-primary {
	background-color: var(--color-primary) !important;
	color: #fff !important;
	border-color: var(--color-primary) !important;
}

/* Hover: outlined orange */
.ff-btn:hover,
.btn-primary:hover {
	background-color: transparent !important;
	color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

/* =========================
   ORANGE OUTLINE BUTTON
========================= */

/* Default: outlined orange */
.btn-primary-outline {
	background-color: transparent !important;
	color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

/* Hover: filled orange */
.btn-primary-outline:hover {
	background-color: var(--color-primary) !important;
	color: #fff !important;
}

/* =========================
   OPTIONAL EFFECTS
========================= */

.btn:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
}

.btn:active {
	transform: scale(0.98) !important;
}

@media (min-width: 900px) {
	.btn-md {
		max-width: 310px !important;
	}
}