/**
 * Стили UI-блока: Кнопка (<button>)
 *
 * @package medexpress-by-fin-code
 */

.me-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.05;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
	padding: 15px 32px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
	background: none;
}

/* 1. Синий фон и рамка, белый текст */
.me-btn--primary {
	font-weight: 400;
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.me-btn--primary:hover {
	opacity: 0.9;
	border-color: var(--primary-color);
	color: #fff;
}

/* 2. Прозрачный фон, синие рамка и текст */
.me-btn--outline {
	background-color: transparent;
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.me-btn--outline:hover {
	background-color: rgba(24, 68, 154, 0.08);
	border-color: var(--primary-color);
	color: var(--primary-color);
}

/* 3. Белые фон и рамка, синий текст */
.me-btn--white {
	background-color: #fff;
	border-color: #fff;
	color: var(--primary-color);
}

.me-btn--white:hover {
	opacity: 0.95;
	border-color: #fff;
	color: var(--primary-color);
}

/* 4. Прозрачный фон, белые рамка и текст */
.me-btn--outline-white {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}

.me-btn--outline-white:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: #fff;
	color: #fff;
}

/* 5. Просто синий текст */
.me-btn--text {
	background-color: transparent;
	border-color: transparent;
	padding: 0;
	color: var(--primary-color);
}

.me-btn--text:hover {
	text-decoration: underline;
	border-color: transparent;
	color: var(--primary-color);
}

.me-btn--wide {
	min-width: 257px;
}


/* mobile */

.me-btn:disabled {
	opacity: 0.5;
	pointer-events: none;
}

@media (max-width: 768px) {
	.me-btn:not(.me-btn--text) {
		width: 100%;
	}
}