/* ==========================================================================
   ディナーコース 大人/お子様 画像切替

   対象: 食事ページのディナーコース画像をアイコンボタンで切り替える機能
   関連HTML: page-food.php / src/includes/_food.html
   関連JS: main.js のディナー切替処理
   ========================================================================== */

.dinner-icon-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dinner-icon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
}

.dinner-icon-group:hover {
  transform: scale(1.03);
}

.dinner-icon-image {
  object-fit: contain;
}

/* Inactive state */
.dinner-icon-group .dinner-icon-image {
  opacity: 0.4;
  filter: grayscale(40%);
  transition: opacity 0.3s ease, filter 0.3s ease, border-color 0.3s ease;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
}

/* Active state */
.dinner-icon-group.active .dinner-icon-image {
  opacity: 1 !important;
  filter: none;
  border-bottom: 2px solid var(--color-primary);
}