/* 選択エリア全体のスタイル */
#price-selector-area {
  padding: 10px 25px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10px;
}

.selection-group h3 {
  font-size: 1.1rem;
  margin-top: 20px;
  margin-bottom: 15px;
  color: #d32f2f; /* 見出しの赤色 */
}

/* ラジオボタンを包むフレックスボックス */
.radio-flex, .radio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  justify-content: flex-start; /* 左揃えを確実にする */
}

/* 枠線付きの選択肢（画像のデザインを再現） */
.radio-box {
  flex: 0 0 200px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  box-sizing: border-box; /* パディングを含めたサイズ計算 */
  transition: all 0.2s ease;
}

/* ラジオボタン自体の色と余白 */
.radio-box input[type="radio"] {
  width: 15px;
  height: 15px;
  margin-right: 12px;
  cursor: pointer;
}

/* ラベルテキスト */
.radio-box span {
  font-weight: bold;
  font-size: 0.85rem;
}

/* チェックされた時の背景色と枠線 */
.radio-box:has(input:checked) {
  background-color: #fff0f0; /* 薄い赤 */
  border-color: #f8a0a0;     /* 濃い赤 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 選択不可（disabled）の時のスタイル */
.radio-box.disabled {
  background-color: #eee !important;
  color: #999;
  cursor: not-allowed;
  border-color: #ddd !important;
}

.radio-box.disabled input {
  cursor: not-allowed;
}

/* テーブル読み込み中の演出 */
#table-style {
  transition: opacity 0.3s ease;
}

/* 選択不可（disabled）の時のスタイル */
.radio-box.disabled {
  background-color: #f5f5f5 !important;
  color: #bbb;
  border-color: #ddd !important;
  opacity: 0.6;
  cursor: not-allowed;
}

@media screen and (max-width: 600px) {
  .radio-box {
    flex: 0 0 100%; /* スマホでは1列（横幅いっぱい）にする */
  }
}