/*
 * 手勢版互動層樣式 — 所有編輯器頁面默認載入（帶 ?ui=classic 則不載）。
 * 這支只在編輯器頁載入（enqueue 已限定），所以選擇器不必再多包一層 class；
 * 只有「跟輸入方式有關」的才用 .spb-mode-touch / .spb-mode-mouse。
 */

/* 物件工具列：引擎用內聯 display:flex 顯示、display:none 隱藏。
   用屬性選擇器只在「顯示中」時改成格線 → 不會把該藏起來的工具列變成永遠顯示。 */
#spb-objbar[style*="flex"] {
	display: grid !important;
	grid-template-columns: repeat( 5, 1fr );
	gap: 7px;
	padding: 9px 10px 11px;
}
/* 觸控命中面積：原本 33～47 × 37px（低於手指需要的 44px） */
#spb-objbar .spb-obj {
	min-height: 46px;
	font-size: 14px;
	border-radius: 12px;
	padding: 6px 2px;
}
/* 長按連續縮放的兩顆：按住時給明顯回饋 */
#spb-zoom-in:active, #spb-zoom-out:active { background: #cfd8e3; }

/* 裁切（方案 A：框固定、照片動）：框外壓暗。用 DOM 疊層而不是 fabric 物件 → 收掉就是移除節點。 */
.spb-canvas-wrap { position: relative; }
.spb-crop-mask {
	position: absolute; left: 0; top: 0; right: 0; bottom: 0;
	overflow: hidden;          /* 不加這行，box-shadow 的 9999px 會把整個畫面都壓暗 */
	pointer-events: none;      /* 遮罩不能吃掉手勢 */
	z-index: 4;
}
.spb-crop-win { position: absolute; box-shadow: 0 0 0 9999px rgba( 0, 0, 0, 0.55 ); }
/* 圓形商品的畫布外框在裁切時要解除，否則整張照片被切成圓的、看不到要裁的範圍 */
.spb-app.spb-cropping .spb-canvas-wrap { -webkit-clip-path: none !important; clip-path: none !important; }
/* 裁切期間「鋪滿紅框」那條提示沒有意義（照片正被縮放）→ 隱形但保留高度，畫布不跳動 */
.spb-app.spb-cropping .spb-range-hint { visibility: hidden; }

/* 「已鋪滿紅框」確認態：由 spb-touch.js 依實際覆蓋範圍切換（引擎那條紅字是靜態說明、鋪滿了也不會消失） */
.spb-hint-fill.spb-fill-ok { color: #1a7f37 !important; font-weight: 600; }

/* 目前選取的圖層名稱：沒有控制點時，這是「我現在在動誰」的唯一線索 */
.spb-touch-sel {
	position: absolute;
	left: 10px; top: 8px;
	z-index: 5;
	background: rgba( 34, 113, 177, 0.92 );
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
	pointer-events: none;
	white-space: nowrap;
}

/* 一次性操作提示（只出現一次，記在 localStorage） */
.spb-touch-hint {
	position: absolute;
	left: 50%; bottom: 14px;
	transform: translateX( -50% );
	z-index: 6;
	background: rgba( 26, 26, 26, 0.88 );
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	padding: 9px 14px;
	border-radius: 12px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.35s ease;
}
.spb-touch-hint b { color: #ffd400; font-weight: 700; }
.spb-touch-hint.is-out { opacity: 0; }

/* 觸控模式：畫布不要出現滑鼠游標樣式；文字選取關掉（長按不會跳出「選取/拷貝」） */
.spb-mode-touch .spb-canvas-wrap canvas { cursor: default !important; }
.spb-mode-touch .spb-stage {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}