/* 串串小圖選擇器。
 * 刻意做成「就地展開」而不是彈窗／浮層：業主明確要求 UI 不可以蓋住畫面上的其他內容。
 */
.ccp-picker {
	margin: 18px 0;
	padding: 14px;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	background: #fff;
}

.ccp-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 10px;
}

.ccp-title { font-size: 16px; }

.ccp-count {
	font-size: 14px;
	color: #666;
}

.ccp-count b {
	font-size: 17px;
	color: #c1121f;
}

.ccp-chosen {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 0;
	margin-bottom: 10px;
}

.ccp-chosen:empty { display: none; }

.ccp-chip {
	padding: 4px 10px;
	border: 1px solid #c1121f;
	border-radius: 999px;
	background: #fff5f5;
	color: #c1121f;
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
}

.ccp-search {
	width: 100%;
	padding: 8px 10px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 15px; /* 低於 16px 時 iOS Safari 一聚焦就會自動放大整頁 */
	box-sizing: border-box;
}

.ccp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.ccp-tab {
	padding: 6px 12px;
	border: 1px solid #ddd;
	border-radius: 999px;
	background: #fafafa;
	font-size: 14px;
	cursor: pointer;
}

.ccp-tab.is-on {
	border-color: #333;
	background: #333;
	color: #fff;
}

.ccp-panel { display: none; }

.ccp-panel.is-on {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 88px, 1fr ) );
	gap: 8px;
}

/* 搜尋時跨系列一起顯示，否則客人打了關鍵字卻只看得到目前這一頁的結果 */
.ccp-picker.is-searching .ccp-panel {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 88px, 1fr ) );
	gap: 8px;
}

.ccp-item {
	display: block;
	padding: 6px 4px;
	border: 2px solid #eee;
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
	background: #fff;
}

.ccp-item input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ccp-item img {
	display: block;
	width: 100%;
	height: 64px;
	object-fit: contain;
	margin-bottom: 4px;
}

.ccp-item span {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	color: #444;
	word-break: break-all;
}

.ccp-item.is-on {
	border-color: #c1121f;
	background: #fff5f5;
}

/* 選滿之後，沒選到的變淡但仍可點（點了會被 JS 退回，並非真的停用） */
.ccp-item.is-off { opacity: .35; }

.ccp-item.is-hidden { display: none; }

.ccp-hint {
	margin: 10px 0 0;
	font-size: 13px;
	color: #777;
}

.ccp-hint.is-warn {
	color: #c1121f;
	font-weight: 700;
}

@media ( max-width: 480px ) {
	.ccp-item img { height: 56px; }
	.ccp-panel.is-on,
	.ccp-picker.is-searching .ccp-panel {
		grid-template-columns: repeat( auto-fill, minmax( 76px, 1fr ) );
	}
}