/* 按钮 */

.donate-btn {
	background: #ff7a50;
	color: white;
	border: none;
	padding: 12px 30px;
	border-radius: 10px;
	font-size: 15px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: .25s;
	box-shadow: 0 6px 20px rgba(0,0,0,.2);
    margin: 20px auto;
}

.donate-btn i {
	height: 13px;
}

.donate-btn:hover {
	transform: scale(1.05);
}

.donate-btn:active{
	transform: scale(1.05);
}


/* 弹窗 */

.modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 999;
}

.modal-box {
	background: white;
	width: 100%;
	max-width: 640px;
	border-radius: 16px;
	padding: 28px;
	position: relative;
	box-shadow: 0 25px 60px rgba(0,0,0,.35);
	animation: fade .25s ease;
}

@keyframes fade {
	from {
		opacity: 0;
		transform: scale(.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}


/* 关闭 */

.close {
	position: absolute;
	right: 16px;
	top: 12px;
	font-size: 20px;
	cursor: pointer;
	color: #999;
}

.close:hover {
	color: #333;
}


/* 标题 */

h2 {
	text-align: center;
	margin-bottom: 20px;
}


/* 支付方式 */

.methods {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.method {
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	cursor: pointer;
	background: #fafafa;
	transition: .25s;
}

.method:hover {
	transform: scale(1.05);
	box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

.method img {
	width: 48px;
	margin: 0 auto 8px auto;
}

.method span {
	display: block;
	font-size: 15px;
}


/* 二维码 */

.qr-page {
	display: none;
	text-align: center;
}

.qr-page img {
	max-width: 240px;
	margin: 20px auto 10px auto;
	display: block;
	background: white;
	padding: 10px;
	border-radius: 16px;
	border: 1px solid #eee;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

#qrTip {
	color: #666;
	margin-top: 6px;
}


/* 地址复制 */

.address-box {
	display: none;
	margin-top: 20px;
	display: flex;
	gap: 8px;
}

.address-box input {
	flex: 1;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	color: #666;
}

#copyBtn {
	background: #333;
	color: white;
	border: none;
	padding: 10px 16px;
	border-radius: 6px;
	cursor: pointer;
}

#copyBtn:hover {
	background: #111;
}


/* 返回按钮 */

#backBtn {
	background: #f2f2f2;
	border: none;
	padding: 10px 18px;
	border-radius: 8px;
	cursor: pointer;
	margin-top: 25px;
}


/* 手机适配 */

@media (max-width:600px) {

	.modal-box {
		padding: 20px;
	}

	.methods {
		grid-template-columns: 1fr;
	}

	.method {
		padding: 18px;
	}

	.qr-page img {
		max-width: 200px;
	}

	.address-box {
		flex-direction: column;
	}

	#copyBtn {
		width: 100%;
	}

	.donate-btn {
		font-size: 17px;
		padding: 16px 28px;
	}
}