/**
 * Googooa Countdown Timer —— 前台样式
 *
 * 六种皮肤共用同一套 HTML 结构，差异全部在这里用 CSS 表达。
 *
 * 变量分两层：
 *   --gct-*-base  由 PHP 按活动配置写在元素的 style 属性上（行内）
 *   --gct-*       由本文件从 base 算出，移动端可以再乘一个缩放系数
 *
 * 之所以分两层：行内 style 优先级高于任何样式表规则（媒体查询也不例外），
 * 如果 PHP 直接下发最终值，移动端缩放就永远无法生效。
 *
 * 选择器一律带 .gct- 前缀且不用 !important，主题需要微调时可正常覆盖。
 */

.gct-timer {
	/* —— 由 PHP 覆盖的基准值 —— */
	--gct-bg: #444444;
	--gct-text: #ffffff;
	--gct-border-color: #444444;
	--gct-border-style: none;
	--gct-border-width: 0;
	--gct-size-value-base: 22px;
	--gct-size-label-base: 13px;
	--gct-box-base: 60px;
	--gct-mobile-scale: 1;

	/* —— 实际生效值（桌面端等于基准值）—— */
	--gct-size-value: var(--gct-size-value-base);
	--gct-size-label: var(--gct-size-label-base);
	--gct-box: var(--gct-box-base);

	margin: 0 0 1em;
	font-size: var(--gct-size-label);
	line-height: 1.5;
	transition: opacity .35s ease;
}

.gct-timer--hiding {
	opacity: 0;
}

.gct-timer__date {
	font-weight: 600;
}

/* —— 单位格：通用骨架 —— */

.gct-timer__units {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
	margin: .35em 0;
	vertical-align: middle;
}

.gct-timer__unit[hidden] {
	display: none;
}

.gct-timer__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-align: center;
	border: var(--gct-border-width) var(--gct-border-style) var(--gct-border-color);
}

.gct-timer__value {
	display: block;
	font-size: var(--gct-size-value);
	font-weight: 700;
	line-height: 1.15;
	/* 等宽数字：秒数跳动时整行宽度不抖 */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.gct-timer__label {
	display: block;
	font-size: var(--gct-size-label);
	line-height: 1.2;
	opacity: .9;
}

/* ============================================================
   皮肤 1 / 2：圆形（填充、描边）
   ============================================================ */

.gct-skin-round_fill .gct-timer__unit,
.gct-skin-round_ghost .gct-timer__unit {
	width: var(--gct-box);
	height: var(--gct-box);
	border-radius: 50%;
}

.gct-skin-round_fill .gct-timer__unit {
	background: var(--gct-bg);
	color: var(--gct-text);
}

.gct-skin-round_ghost .gct-timer__unit {
	background: transparent;
	color: var(--gct-bg);
}

/* ============================================================
   皮肤 3 / 4：方形（填充、描边）
   ============================================================ */

.gct-skin-square_fill .gct-timer__unit,
.gct-skin-square_ghost .gct-timer__unit {
	width: var(--gct-box);
	height: var(--gct-box);
	border-radius: 4px;
}

.gct-skin-square_fill .gct-timer__unit {
	background: var(--gct-bg);
	color: var(--gct-text);
}

.gct-skin-square_ghost .gct-timer__unit {
	background: transparent;
	color: var(--gct-bg);
}

/* ============================================================
   皮肤 5：高亮文本
   数字大、标签小，单位之间用冒号分隔
   ============================================================ */

.gct-skin-highlight .gct-timer__units {
	gap: 0;
	align-items: baseline;
}

.gct-skin-highlight .gct-timer__unit {
	flex-direction: row;
	align-items: baseline;
	gap: .25em;
	padding: 0 .35em;
	color: var(--gct-bg);
	background: transparent;
	border: 0;
}

.gct-skin-highlight .gct-timer__label {
	opacity: .75;
}

/* 冒号分隔符 */
.gct-skin-highlight .gct-timer__unit::after {
	content: ":";
	margin-left: .35em;
	font-size: var(--gct-size-value);
	font-weight: 700;
	opacity: .45;
}

/* 最后一格不要冒号。:last-of-type 同样匹配被 hidden 的格子，
   所以用 :last-child —— 格子是靠 hidden 属性隐藏而非移除，
   因此「秒」永远是最后一个子元素，冒号只会出现在它前面的格子后。 */
.gct-skin-highlight .gct-timer__unit:last-child::after {
	content: none;
}

/* ============================================================
   皮肤 6：纯文本
   完全跟随主题字体，只上色
   ============================================================ */

.gct-skin-plain .gct-timer__units {
	gap: .5em;
	align-items: baseline;
}

.gct-skin-plain .gct-timer__unit {
	flex-direction: row;
	align-items: baseline;
	gap: .15em;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--gct-bg);
}

.gct-skin-plain .gct-timer__label {
	opacity: 1;
}

/* ============================================================
   进度条
   ============================================================ */

.gct-bar {
	--gct-bar-bg: #dddddd;
	--gct-bar-active: #ee303c;
	--gct-bar-height: 16px;
	--gct-bar-radius: 8px;

	margin: 0 0 1em;
	line-height: 1.5;
	transition: opacity .35s ease;
}

.gct-bar--hiding {
	opacity: 0;
}

.gct-bar__track {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 320px;
	height: var(--gct-bar-height);
	margin: .35em 0;
	background: var(--gct-bar-bg);
	border-radius: var(--gct-bar-radius);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.gct-bar__fill {
	display: block;
	height: 100%;
	width: 0;
	background-color: var(--gct-bar-active);
	border-radius: inherit;
	/* 服务端已把最终宽度写在行内 style 上，这里的过渡只用于
	   后续刷新（REST 同步回来数字变化时）的平滑变化。 */
	transition: width 1s ease-in-out;
}

.gct-bar__num {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	color: var(--gct-bar-active);
}

/* —— 圆角样式 —— */

.gct-bar--edge-rounded .gct-bar__track {
	border-radius: var(--gct-bar-radius);
}

.gct-bar--edge-smooth .gct-bar__track {
	border-radius: 4px;
}

.gct-bar--edge-sharp .gct-bar__track {
	border-radius: 0;
}

/* —— 方向：从右往左 ——
   填充块贴右边对齐，视觉上像是余量在往左退。 */

.gct-bar--rtl .gct-bar__track {
	direction: rtl;
}

.gct-bar--rtl .gct-bar__fill {
	margin-left: auto;
}

/* —— 皮肤：斜纹 —— */

.gct-bar--stripe .gct-bar__fill,
.gct-bar--stripe_animate .gct-bar__fill {
	background-image: linear-gradient(
		45deg,
		rgba(255, 255, 255, .18) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, .18) 50%,
		rgba(255, 255, 255, .18) 75%,
		transparent 75%,
		transparent
	);
	background-size: 40px 40px;
}

/* —— 皮肤：流动斜纹 —— */

.gct-bar--stripe_animate .gct-bar__fill {
	animation: gct-bar-stripes 2s linear infinite;
}

@keyframes gct-bar-stripes {
	from {
		background-position: 40px 0;
	}
	to {
		background-position: 0 0;
	}
}

/* —— 皮肤：纯色 —— */

.gct-bar--fill .gct-bar__fill {
	background-image: none;
}

/* 列表页和购物车里收窄一点 */
.gct-bar[data-gct-context="grid"] .gct-bar__track,
.gct-bar[data-gct-context="cart"] .gct-bar__track {
	max-width: 100%;
}

/* ============================================================
   场景微调
   ============================================================ */

/* 商品列表页和购物车里空间紧张，整体收一档 */
.gct-timer[data-gct-context="grid"],
.gct-timer[data-gct-context="cart"] {
	--gct-box: calc(var(--gct-box-base) * .72);
	--gct-size-value: calc(var(--gct-size-value-base) * .72);
	--gct-size-label: calc(var(--gct-size-label-base) * .85);

	margin-bottom: .5em;
}

/* ============================================================
   移动端
   ============================================================ */

@media (max-width: 767px) {
	.gct-timer {
		--gct-box: calc(var(--gct-box-base) * var(--gct-mobile-scale));
		--gct-size-value: calc(var(--gct-size-value-base) * var(--gct-mobile-scale));
		--gct-size-label: calc(var(--gct-size-label-base) * var(--gct-mobile-scale));
	}

	.gct-timer__units {
		gap: 6px;
	}
}

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
	.gct-timer {
		transition: none;
	}
}