/**
 * 清潔紀錄 QR — 前台樣式
 *
 * 所有顏色都走 CSS 變數，且套用時只用單一 class 選擇器（0,1,0），
 * 因此 Elementor 的樣式設定（0,2,0）永遠可以覆寫這裡的預設值。
 */

.ncl-wrap {
	box-sizing: border-box;
	width: 100%;

	/* 「跟隨主題」預設：不指定顏色，沿用外層佈景。 */
	--ncl-title-color: inherit;
	--ncl-subtitle-color: inherit;
	--ncl-accent: currentColor;
	--ncl-text: inherit;
	--ncl-muted: inherit;
	--ncl-card-bg: rgba(127, 127, 127, .08);
	--ncl-line: rgba(127, 127, 127, .22);
	--ncl-ok-bg: #e8f7ee;
	--ncl-ok-color: #14663a;
	--ncl-err-bg: #fdecec;
	--ncl-err-color: #96271f;

	/* 分隔線尺寸 */
	--ncl-divider-length: 130px;
	--ncl-divider-thickness: 1px;
	--ncl-divider-gem: 9px;
	--ncl-divider-gap: 14px;
}

/* 深色金色配色（對應店家網站風格） */
.ncl-wrap--gold {
	--ncl-title-color: #e6dfc9;
	--ncl-subtitle-color: #a08d60;
	--ncl-accent: #b49a5f;
	--ncl-text: #e3dcc8;
	--ncl-muted: #9a9078;
	--ncl-card-bg: rgba(180, 154, 95, .07);
	--ncl-line: rgba(180, 154, 95, .26);
	--ncl-ok-bg: rgba(120, 170, 130, .12);
	--ncl-ok-color: #c8dcc4;
	--ncl-err-bg: rgba(190, 90, 80, .14);
	--ncl-err-color: #e6b3ad;
}

.ncl-wrap * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- */
/* 抬頭區（抬頭 + 小標 + 分隔線）                                     */
/* ---------------------------------------------------------------- */

.ncl-head {
	margin: 0 0 26px;
	text-align: center;
}

.ncl-title {
	margin: 0;
	color: var(--ncl-title-color);
	font-size: 2em;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .06em;
}

.ncl-subtitle {
	margin: .5em 0 0;
	color: var(--ncl-subtitle-color);
	font-size: 1.3em;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: .14em;
	font-variant: small-caps;
}

/* inline-flex：讓分隔線跟著 .ncl-head 的 text-align 一起靠左／置中／靠右。 */
.ncl-divider {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: calc(var(--ncl-divider-length) * 2 + var(--ncl-divider-gem) + var(--ncl-divider-gap) * 2);
	margin: 1.4em 0 0;
	vertical-align: middle;
}

.ncl-divider__line {
	flex: 0 1 var(--ncl-divider-length);
	height: var(--ncl-divider-thickness);
	min-width: 0;
}

.ncl-divider__line--left {
	background-image: linear-gradient(to right, transparent, var(--ncl-accent) 55%);
}

.ncl-divider__line--right {
	background-image: linear-gradient(to left, transparent, var(--ncl-accent) 55%);
}

.ncl-divider__gem {
	flex: 0 0 auto;
	width: var(--ncl-divider-gem);
	height: var(--ncl-divider-gem);
	margin: 0 var(--ncl-divider-gap);
	background-color: var(--ncl-accent);
	transform: rotate(45deg);
}

/* ---------------------------------------------------------------- */
/* 打卡成功提示                                                      */
/* ---------------------------------------------------------------- */

.ncl-checkin {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 14px 18px;
	border-radius: 10px;
	background-color: var(--ncl-ok-bg);
	color: var(--ncl-ok-color);
	font-weight: 600;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .28s ease, transform .28s ease;
}

.ncl-checkin[hidden] {
	display: none;
}

.ncl-checkin.is-visible {
	opacity: 1;
	transform: none;
}

.ncl-checkin--error {
	background-color: var(--ncl-err-bg);
	color: var(--ncl-err-color);
}

.ncl-checkin__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: .8em;
	font-weight: 700;
	line-height: 1;
	flex: 0 0 auto;
}

.ncl-checkin--error .ncl-checkin__icon {
	display: none;
}

/* ---------------------------------------------------------------- */
/* 最後清潔時間卡片                                                  */
/* ---------------------------------------------------------------- */

.ncl-status {
	margin: 0 0 24px;
	padding: 20px 22px;
	border-radius: 14px;
	background-color: var(--ncl-card-bg);
	text-align: center;
}

.ncl-status__label {
	margin: 0 0 8px;
	color: var(--ncl-muted);
	font-size: .85em;
	letter-spacing: .1em;
}

.ncl-status__value {
	color: var(--ncl-title-color);
	font-size: 1.55em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .03em;
}

.ncl-status__value--empty {
	color: var(--ncl-muted);
	font-size: 1em;
	font-weight: 400;
}

.ncl-status__by {
	margin-top: 8px;
	color: var(--ncl-muted);
	font-size: .9em;
}

/* ---------------------------------------------------------------- */
/* 紀錄清單                                                          */
/* ---------------------------------------------------------------- */

.ncl-list__title {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--ncl-subtitle-color);
	font-weight: 600;
	letter-spacing: .08em;
}

.ncl-list__count {
	color: var(--ncl-muted);
	font-size: .8em;
	font-weight: 400;
}

.ncl-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ncl-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--ncl-line);
	color: var(--ncl-text);
}

.ncl-item:last-child {
	border-bottom: 0;
}

.ncl-item__index {
	flex: 0 0 auto;
	min-width: 2em;
	color: var(--ncl-muted);
	font-size: .8em;
	text-align: center;
}

.ncl-item__time {
	flex: 1 1 auto;
	color: var(--ncl-text);
}

.ncl-item__user {
	flex: 0 0 auto;
	color: var(--ncl-muted);
	font-size: .85em;
}

.ncl-item--new {
	animation: ncl-fade-in .4s ease;
}

@keyframes ncl-fade-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ncl-list__empty,
.ncl-notice {
	padding: 18px;
	border-radius: 10px;
	background-color: var(--ncl-card-bg);
	color: var(--ncl-muted);
	text-align: center;
}

.ncl-wrap--pending {
	opacity: .75;
}

/* ---------------------------------------------------------------- */
/* 手機                                                              */
/* ---------------------------------------------------------------- */

@media (max-width: 480px) {

	.ncl-wrap {
		--ncl-divider-length: 70px;
	}

	.ncl-title {
		font-size: 1.7em;
	}

	.ncl-subtitle {
		font-size: 1.1em;
	}

	.ncl-status__value {
		font-size: 1.3em;
	}
}