/**
 * UI制限制御のスタイル
 */

/* 無効化された選択肢のスタイル */
.radio-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.radio-option.disabled input[type="radio"] {
  cursor: not-allowed;
}

.radio-option.disabled span {
  color: #999;
  text-decoration: line-through;
}

/* disable状態のradio button用の打ち消し線スタイル */
input[type="radio"]:disabled + span,
input[type="radio"]:disabled + span + span {
  text-decoration: line-through;
  color: #999;
  opacity: 0.7;
}

/* 言語・文字数選択エリアのdisable状態 */
#bothLanguagesOption input[type="radio"]:disabled + span,
#longTextOption input[type="radio"]:disabled + span {
  text-decoration: line-through;
  color: #999;
  opacity: 0.7;
}

/* formSections内のdisable状態 */
#modeRadioGroup input[type="radio"]:disabled + span,
#lengthRadioGroup input[type="radio"]:disabled + span {
  text-decoration: line-through;
  color: #999;
  opacity: 0.7;
}

/* brand-radio-btn用のdisable状態 */
.brand-radio-btn input[type="radio"]:disabled + span,
.brand-radio-btn input[type="radio"]:disabled + span .desc {
  text-decoration: line-through;
  color: #999;
  opacity: 0.7;
}

/* 制限理由表示 */
.restriction-message {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
  color: #856404;
  font-size: 14px;
  animation: fadeIn 0.3s ease-in-out;
}

.restriction-message::before {
  content: "⚠️ ";
  margin-right: 5px;
}

/* フェードインアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 制限されたセクションのスタイル */
.ui-restricted-section {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .restriction-message {
    font-size: 12px;
    padding: 8px;
  }
}