/* =====================================
   BOOTSTRAP BUTTON CUSTOM STYLE
===================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-family: Roboto-medium, sans-serif;
	letter-spacing: .2px;
	cursor: pointer;
	user-select: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s
		ease, box-shadow .2s ease, transform .15s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .08);
}

.btn:active {
	transform: translateY(0);
}

/* =====================================
   PRIMARY
===================================== */
.btn-primary {
	background: #2563eb;
	border-color: #2563eb;
	color: white;
}

.btn-primary:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
}

/* =====================================
   DANGER
===================================== */
.btn-danger {
	background: #dc2626;
	border-color: #dc2626;
	color: white;
}

.btn-danger:hover {
	background: #b91c1c;
	border-color: #b91c1c;
}

/* =====================================
   OUTLINE
===================================== */
.btn-outline-secondary {
	background: white;
	color: #64748b;
	border-color: #dbe1ea;
}

.btn-outline-secondary:hover {
	background: #eff6ff;
	color: #2563eb;
	border-color: #93c5fd;
}

/* =====================================
   ICON BUTTON
===================================== */
.btn-icon {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 10px;
}

/* =====================================
   DISABLED
===================================== */
.btn:disabled, .btn.disabled {
	background: #f1f5f9;
	color: #94a3b8;
	border-color: #e2e8f0;
	box-shadow: none;
	transform: none;
}
/* =====================================
   SUCCESS (ЗБЕРЕГТИ)
===================================== */
.btn-success {
	background: #16a34a;
	border-color: #16a34a;
	color: white;
}

.btn-success:hover {
	background: #15803d;
	border-color: #15803d;
	color: white;
}

/* =====================================
   WARNING (ПОПЕРЕДЖЕННЯ)
===================================== */
.btn-warning {
	background: #f59e0b;
	border-color: #f59e0b;
	color: white;
}

.btn-warning:hover {
	background: #d97706;
	border-color: #d97706;
	color: white;
}

/* =====================================
   INFO
===================================== */
.btn-info {
	background: #0891b2;
	border-color: #0891b2;
	color: white;
}

.btn-info:hover {
	background: #0e7490;
	border-color: #0e7490;
	color: white;
}

/* =====================================
   LIGHT
===================================== */
.btn-light {
	background: #f8fafc;
	border-color: #e2e8f0;
	color: #475569;
}

.btn-light:hover {
	background: #f1f5f9;
	color: #2563eb;
}

/* =====================================
   DARK
===================================== */
.btn-dark {
	background: #1e293b;
	border-color: #1e293b;
	color: white;
}

.btn-dark:hover {
	background: #0f172a;
	border-color: #0f172a;
}