/* 対象商品一覧専用サジェスト機能用スタイル */

/* app-containerの位置指定を確実にする */
.app-container {
  position: relative;
}

.target-items-suggestion-container {
  position: absolute;
  width: calc(100% - 30px); /* 左右に15pxずつ余白 */
  max-width: 770px; /* アプリコンテナの最大幅から余白分を引く (800px - 30px) */
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.target-items-suggestion-title {
  padding: 8px 12px;
  background-color: #f8f9fa;
  font-size: 14px;
  color: #666;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.target-items-suggestion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.target-items-suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  gap: 10px; /* 画像とテキストの間隔 */
}

.target-items-suggestion-item:hover {
  background-color: #f2f7ff;
}

/* 商品画像のアイコンスタイル */
.suggestion-item-image {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #eee;
  flex-shrink: 0; /* 画像サイズを固定 */
  background-color: #f5f5f5;
}

.target-items-suggestion-item .item-text {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.target-items-suggestion-item strong {
  font-weight: bold;
  color: #2196F3;
}

/* キーボードナビゲーション用スタイル */
.target-items-suggestion-item.selected {
  background-color: #e3f2fd !important;
}

/* PCビュー（非モバイル）のみ特別なスタイルを適用 */
@media screen and (min-width: 601px) {
  .target-items-suggestion-item.selected {
      background-color: #e3f2fd !important;
      border-left: 3px solid #2196F3 !important;
      padding-left: 9px !important;
  }
}

/* 警告メッセージのコンテナ */
.target-items-warning-container {
  margin-top: 2px;
  margin-bottom: 8px;
  padding: 0 5px;
}

/* 最小文字数警告メッセージのスタイル */
.target-items-min-char-warning {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: flex;
  align-items: center;
  display: none;
}

.target-items-min-char-warning strong {
  display: inline;
  margin-right: 5px;
  font-weight: bold;
}

.target-items-min-char-warning span {
  display: inline;
}

/* 検索結果なしメッセージのスタイル */
.target-items-no-result-warning {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: flex;
  align-items: center;
  display: none;
}

.target-items-no-result-warning strong {
  display: inline;
  margin-right: 5px;
  font-weight: bold;
}

.target-items-no-result-warning span {
  display: inline;
}

/* 検索ボックスのフォーカス時のボーダー調整 */
.search-box input:focus {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  outline: none;
  border-color: #2196F3;
}

/* サジェストが表示されている時の入力フィールド調整 */
.search-box:has(.target-items-suggestion-container:visible) input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* スマホビュー調整 */
@media screen and (max-width: 600px) {
  .target-items-suggestion-container {
      max-width: calc(100% - 20px); /* スマホでは左右に10pxずつ余白 */
      width: calc(100% - 20px);
      left: 50%;
      transform: translateX(-50%);
      position: absolute;
      z-index: 1001;
  }
  
  .target-items-suggestion-list {
      max-height: 300px;
  }
  
  .target-items-suggestion-item {
      padding: 8px 10px;
      gap: 8px; /* スマホでは画像とテキストの間隔を少し狭く */
      min-height: 48px; /* タップしやすい高さを確保 */
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
  }
  
  /* スマホでは画像を少し小さく */
  .suggestion-item-image {
      width: 28px;
      height: 28px;
  }
  
  .target-items-suggestion-item .item-text {
      font-size: 12px;
      line-height: 1.3;
      word-wrap: break-word;
      overflow-wrap: break-word;
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
  }
  
  .target-items-suggestion-title {
      font-size: 13px;
      padding: 6px 10px;
  }

  .target-items-min-char-warning, 
  .target-items-no-result-warning {
    font-size: 10px;
    padding: 3px 6px;
  }
}