/* 容器放在輸入框下方 */
.wccs-suggest { margin: 8px 0 14px; }

/* 列表：膠囊並排，不全寬 */
.wccs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-start;
}

/* 單顆券：膠囊按鈕 */
.wccs-row{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-sizing: border-box;
  cursor: default;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .02s ease, border-color .15s ease, opacity .15s ease;
  max-width: 100%;
}

.wccs-row .wccs-desc{
  font-size: 13px;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右側標籤 */
.wccs-tag{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.wccs-tag-apply    { background: #1e90ff; color: #fff; }
.wccs-tag-disabled { background: #e5e7eb; color: #6b7280; }

/* 可用：hover 整條藍底白字（兩頁一致） */
.wccs-available{ cursor: pointer; }
.wccs-available:hover{
  background: #1e90ff;
  border-color: #1e90ff;
  box-shadow: 0 2px 8px rgba(30,144,255,.25);
}
.wccs-available:hover .wccs-desc{ color: #fff; }
.wccs-available:hover .wccs-tag-apply{
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* 忙碌：禁止點擊 & 視覺淡出 */
.wccs-available.is-busy{
  pointer-events: none;
  opacity: .6;
}

/* 不可用：返灰，不可點 */
.wccs-disabled{
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}
.wccs-disabled .wccs-desc{ color: #9ca3af; }

.wccs-empty{ color:#6b7280; font-size:13px; }

/* Debug 面板（?wch_debug=1） */
.wccs-debug{
  margin-top:12px;
  border:1px dashed #e5e7eb;
  padding:8px;
  border-radius:6px;
  background:#fcfcfc;
}
.wccs-debug-table{ width:100%; font-size:12px; border-collapse: collapse; }
.wccs-debug-table th,
.wccs-debug-table td{ border:1px solid #eee; padding:6px 8px; text-align:left; }