/**
 * Acme 3D Viewer — frontend styles.
 *
 * v1.1.0: 进度条、多背景切换器、平滑过渡。
 * v1.2.0: AR 按钮、热点、材质选择器。
 */

.acme3d-wrap {
	position: relative;
	width: 100%;
	min-height: 300px;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.08 );
	background: linear-gradient( 135deg, #1e3c72 0%, #2a5298 100% );
	transition: background 0.45s ease;
}

.acme3d-wrap canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* poster */
.acme3d-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 2;
	transition: opacity .35s ease;
	pointer-events: none;
}
.acme3d-poster.is-hidden { opacity: 0; }

/* loading overlay */
.acme3d-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	z-index: 5;
	background: rgba( 0, 0, 0, 0.18 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	color: #fff;
	font-size: 13px;
	letter-spacing: .3px;
	transition: opacity .25s ease;
	font-family: system-ui, -apple-system, sans-serif;
}
.acme3d-loading.is-hidden { opacity: 0; pointer-events: none; }

.acme3d-spinner {
	width: 38px;
	height: 38px;
	border: 3px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: acme3d-spin 0.9s linear infinite;
}
@keyframes acme3d-spin { to { transform: rotate( 360deg ); } }

/* progress bar */
.acme3d-progress {
	width: 180px;
	height: 4px;
	background: rgba( 255, 255, 255, 0.2 );
	border-radius: 999px;
	overflow: hidden;
}
.acme3d-progress-bar {
	width: 0%;
	height: 100%;
	background: linear-gradient( 90deg, #ffffff 0%, #cfe9ff 100% );
	border-radius: 999px;
	transition: width 0.2s ease;
}
.acme3d-loading-text { font-size: 12px; opacity: 0.9; }
.acme3d-loading-pct { font-style: normal; font-weight: 600; margin-left: 4px; }

/* toolbar */
.acme3d-toolbar {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	gap: 6px;
	z-index: 10;
}
.acme3d-btn {
	width: 36px;
	height: 36px;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	background: rgba( 255, 255, 255, 0.15 );
	color: #fff;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	transition: all .15s ease;
	font-family: system-ui, -apple-system, sans-serif;
}
.acme3d-btn:hover { background: rgba( 255, 255, 255, 0.28 ); }
.acme3d-btn.is-active {
	background: rgba( 255, 102, 0, 0.85 );
	border-color: rgba( 255, 102, 0, 1 );
	color: #fff;
}

/* 背景切换器 */
.acme3d-bg-picker {
	position: absolute;
	bottom: 12px;
	right: 12px;
	display: flex;
	gap: 8px;
	z-index: 10;
	padding: 6px 8px;
	background: rgba( 0, 0, 0, 0.28 );
	border-radius: 999px;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
}
.acme3d-bg-dot {
	width: 22px;
	height: 22px;
	border: 2px solid rgba( 255, 255, 255, 0.6 );
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
}
.acme3d-bg-dot:hover { transform: scale( 1.12 ); border-color: #fff; }
.acme3d-bg-dot.is-active {
	border-color: #fff;
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.35 ), 0 1px 3px rgba( 0, 0, 0, 0.3 );
}

/* hint */
.acme3d-hint {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 11px;
	letter-spacing: .3px;
	color: rgba( 255, 255, 255, 0.85 );
	background: rgba( 0, 0, 0, 0.25 );
	padding: 6px 10px;
	border-radius: 6px;
	z-index: 10;
	pointer-events: none;
	font-family: system-ui, -apple-system, sans-serif;
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
}

/* ---------- 阶段二:AR 按钮 ---------- */
.acme3d-ar-btn {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid rgba( 255, 255, 255, 0.5 );
	background: rgba( 0, 0, 0, 0.35 );
	color: #fff;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	cursor: pointer;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	text-decoration: none;
	font-family: system-ui, -apple-system, sans-serif;
	transition: all .15s ease;
}
.acme3d-ar-btn:hover {
	background: rgba( 0, 0, 0, 0.55 );
	border-color: #fff;
	color: #fff;
}
.acme3d-ar-btn::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}

/* ---------- 阶段二:热点(红色闪光圆点 + 双层脉冲)---------- */
/* 注意:1.3.1 版本这里有重复选择器未闭合 → 整段失效,前端退化成原生 <button> 样子 */
.acme3d-hotspot {
	position: absolute;
	z-index: 8;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: #ff2a2a;
	border: 2px solid #fff;
	cursor: pointer;
	pointer-events: auto;
	box-shadow:
		0 0 0 1px rgba( 0, 0, 0, 0.25 ),
		0 2px 6px rgba( 0, 0, 0, 0.35 ),
		0 0 10px rgba( 255, 42, 42, 0.55 );
	transition: transform .15s ease, box-shadow .15s ease;
	padding: 0;
	font: 0/0 a; /* 隐藏数字文字;无障碍仍可读 aria-label */
	color: transparent;
	-webkit-tap-highlight-color: transparent;
	/* 圆点本体呼吸,给"在亮"的感觉 */
	animation: acme3d-hs-blink 1.4s ease-in-out infinite;
}

/* 外层脉冲光环 — 持续向外扩散,引导视觉 */
.acme3d-hotspot::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: rgba( 255, 42, 42, 0.45 );
	z-index: -1;
	animation: acme3d-hs-pulse 1.6s ease-out infinite;
	pointer-events: none;
}

/* 内层高光小点 — 让红更"闪" */
.acme3d-hotspot::after {
	content: '';
	position: absolute;
	top: 18%;
	left: 22%;
	width: 30%;
	height: 30%;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.85 );
	pointer-events: none;
}

@keyframes acme3d-hs-pulse {
	0%   { transform: scale( 0.55 ); opacity: 0.75; }
	100% { transform: scale( 2.1 );  opacity: 0;    }
}
@keyframes acme3d-hs-blink {
	0%, 100% { box-shadow:
		0 0 0 1px rgba( 0, 0, 0, 0.25 ),
		0 2px 6px rgba( 0, 0, 0, 0.35 ),
		0 0 8px rgba( 255, 42, 42, 0.5 ); }
	50%      { box-shadow:
		0 0 0 1px rgba( 0, 0, 0, 0.25 ),
		0 2px 6px rgba( 0, 0, 0, 0.35 ),
		0 0 18px rgba( 255, 60, 60, 0.95 ); }
}

.acme3d-hotspot:hover,
.acme3d-hotspot.is-open {
	transform: scale( 1.25 );
	animation-play-state: paused;
}
.acme3d-hotspot.is-open {
	background: #fff;
	border-color: #ff2a2a;
}
.acme3d-hotspot.is-open::after { background: #ff2a2a; }

/* 背面 / 被模型遮挡 — 弱化但保留圆点形态,显得"贴在表面背后" */
.acme3d-hotspot.is-occluded {
	opacity: 0.22;
	pointer-events: none;
	animation: none;
	box-shadow: none;
}
.acme3d-hotspot.is-occluded::before { display: none; }
.acme3d-hotspot.is-occluded::after  { opacity: 0;    }

.acme3d-hotspot-tip {
	position: absolute;
	z-index: 9;
	max-width: 240px;
	padding: 10px 14px;
	background: rgba( 20, 20, 28, 0.92 );
	color: #fff;
	border-radius: 8px;
	font: 13px/1.5 system-ui, -apple-system, sans-serif;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.35 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	transform: translate( -50%, calc( -100% - 14px ) );
	pointer-events: auto;
}
.acme3d-hotspot-tip strong { display: block; margin-bottom: 2px; font-size: 13px; }
.acme3d-hotspot-tip p      { margin: 0; opacity: 0.85; font-size: 12px; }
.acme3d-hotspot-tip::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 0;
	height: 0;
	margin-left: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid rgba( 20, 20, 28, 0.92 );
}

/* ---------- 阶段二:材质/颜色选择器 ---------- */
.acme3d-mat-picker {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px;
	background: rgba( 0, 0, 0, 0.32 );
	border-radius: 10px;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	max-width: 160px;
}
.acme3d-mat-picker-title {
	font: 600 10px/1 system-ui, -apple-system, sans-serif;
	color: rgba( 255, 255, 255, 0.85 );
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
}
.acme3d-mat-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.acme3d-mat-dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid rgba( 255, 255, 255, 0.55 );
	cursor: pointer;
	padding: 0;
	background-size: cover;
	background-position: center;
	transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.acme3d-mat-dot:hover { transform: scale( 1.12 ); border-color: #fff; }
.acme3d-mat-dot.is-active {
	border-color: #fff;
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.45 );
}

/* 右上角同时存在 hint + mat 时,让 hint 让位(:has 支持的现代浏览器) */
.acme3d-wrap:has( .acme3d-mat-picker ) .acme3d-hint {
	top: auto;
	bottom: 12px;
	right: 50%;
	transform: translateX( 50% );
}
/* :has 不支持的浏览器:JS 已经能让二者错开,这里给个兜底 z-index */
.acme3d-mat-picker { z-index: 11; }

@media ( max-width: 600px ) {
	.acme3d-hint { display: none; }
	.acme3d-btn { width: 32px; height: 32px; font-size: 14px; }
	.acme3d-bg-dot { width: 18px; height: 18px; }
	.acme3d-progress { width: 140px; }
	.acme3d-ar-btn { font-size: 12px; padding: 6px 12px; }
	.acme3d-mat-picker { max-width: 130px; padding: 6px; }
	.acme3d-mat-dot { width: 22px; height: 22px; }
	.acme3d-hotspot { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
}

/* errors */
.acme3d-error {
	padding: 16px 20px;
	background: #fff3f3;
	border: 1px solid #ffb3b3;
	color: #b00020;
	border-radius: 8px;
	font-size: 13px;
}
.acme3d-noscript {
	padding: 24px;
	color: #fff;
	text-align: center;
	font-size: 14px;
}

.acme3d-editor-preview { min-height: 200px; }

/* ---------- WooCommerce 图库集成 ---------- */
.woocommerce-product-gallery .acme3d-gallery-slide {
	position: relative;
	width: 100%;
}
.woocommerce-product-gallery .acme3d-gallery-slide .acme3d-gallery-link {
	display: block;
	cursor: default;
}
/* 让 viewer 的 wrap 充满 slide;主图区主题通常给定 aspect-ratio */
.woocommerce-product-gallery .acme3d-gallery-slide .acme3d-wrap {
	width: 100%;
	min-height: 420px;
	border-radius: 0; /* 跟图库一致,不强加圆角 */
}
/* 主图区里的 zoom trigger 对 3D 无效,给个视觉提示 */
.woocommerce-product-gallery.has-acme3d-slide .acme3d-gallery-slide .woocommerce-product-gallery__trigger {
	display: none !important;
}
/* Flexslider 缩略图条里的 3D 项,有个轻量识别 */
.flex-control-thumbs li img[src*="3D"] {
	background: #1e3c72;
}

/* 兜底:主题不支持 :has,如果 3D slide 内还有 .woocommerce-product-gallery__trigger
   会出现一个放大镜按钮跳到 #acme3d 链接,直接隐藏 */
.acme3d-gallery-slide .woocommerce-product-gallery__trigger {
	display: none !important;
}