/* 會員中心：紅利點數與優惠券 */

.hfsc-account {
	margin: 0 0 2.5em;
}

.hfsc-account__title {
	text-align: center;
	letter-spacing: .4em;
	margin: 0 0 1.2em;
}

.hfsc-subtitle {
	margin: 2em 0 .6em;
}

.hfsc-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5em;
	margin: 0 0 1.2em;
	padding: 0;
}

/*
 * DOM 順序是 dt（標籤）→ dd（數值），螢幕閱讀器才讀得出「紅利點數 12 點」；
 * 視覺上要數值在上、標籤在下，用 column-reverse 調換，不動 DOM。
 */
.hfsc-stat {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	text-align: center;
	flex: 0 0 auto;
}

.hfsc-stat__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 7.5em;
	height: 7.5em;
	margin: 0 0 .6em;
	border: 1px solid #d5d5d5;
	border-radius: 50%;
	font-size: 1em;
	line-height: 1.3;
	color: #555;
	word-break: break-all;
}

.hfsc-stat__num {
	font-size: 1.5em;
	font-weight: 600;
	color: #222;
	margin-right: .15em;
}

.hfsc-stat__label {
	font-size: .95em;
	color: #555;
	font-weight: 400;
}

.hfsc-howto {
	max-width: 34em;
	margin: 0 auto 1.5em;
	text-align: center;
	font-size: .95em;
	line-height: 1.7;
	color: #666;
}

/* 餘額為 0 時，說明就是主要內容，給它多一點份量 */
.hfsc-howto--empty {
	background: #f7f7f7;
	border-radius: 6px;
	padding: 1em 1.2em;
	color: #444;
}

.hfsc-coupons {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #eee;
}

.hfsc-coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .6em;
	padding: .9em .2em;
	border-bottom: 1px solid #eee;
}

.hfsc-coupon__code {
	font-weight: 600;
	letter-spacing: .05em;
}

.hfsc-coupon__amount {
	color: #06842f; /* 與白底對比 5.6:1，符合 WCAG AA */
	font-weight: 600;
}

.hfsc-coupon__desc {
	color: #555;
}

.hfsc-coupon__expiry {
	font-size: .9em;
	color: #6a6a6a;
}

.hfsc-coupon__expiry.is-soon {
	color: #b32d2e;
	font-weight: 600;
}

.hfsc-coupon-hint,
.hfsc-empty {
	font-size: .95em;
	line-height: 1.7;
	color: #666;
	padding: 1em .2em;
	margin: 0;
}

/* 手機：圓圈縮小但仍維持可讀字級，兩個並排不擠 */
@media (max-width: 480px) {
	.hfsc-account__title {
		letter-spacing: .25em;
	}

	.hfsc-stats {
		gap: 1em;
	}

	.hfsc-stat__circle {
		width: 6.4em;
		height: 6.4em;
	}

	.hfsc-coupon {
		gap: .35em .6em;
	}
}