/*
 * File: assets/css/core/sol-buttons.css
 * Buttons. Two ways to use them:
 *   1. Plain HTML / our templates:  <a class="sol-btn"> or <a class="sol-btn sol-btn--ghost">
 *   2. Elementor Button widget: give the widget the CSS class
 *      "sol-btn-wrap" (filled) or "sol-btn-wrap sol-btn-wrap--ghost" (outline).
 * Core file: do not delete.
 */
.sol-btn,
.sol-btn-wrap .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sol-space-2);
	min-height: 44px;
	padding: 12px 24px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	background: var(--sol-accent);
	color: var(--sol-accent-ink);
	font: 600 0.9375rem/1.2 var(--sol-font-sans);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--sol-fast) ease, filter var(--sol-fast) ease;
}

.sol-btn:hover,
.sol-btn-wrap .elementor-button:hover {
	color: var(--sol-accent-ink);
	filter: brightness(0.95);
	transform: translateY(-1px);
}

.sol-btn:active,
.sol-btn-wrap .elementor-button:active {
	transform: scale(0.97);
}

.sol-btn--ghost,
.sol-btn-wrap--ghost .elementor-button {
	background: transparent;
	border-color: currentColor;
	color: var(--sol-text);
}

.sol-btn--ghost:hover,
.sol-btn-wrap--ghost .elementor-button:hover {
	background: var(--sol-surface-alt);
	color: var(--sol-text);
}