/* Diagnosis Section */
#Diagnosis {
  background-color: #f8f9fa;
  padding: 60px 0;
}

.diagnosis-container {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.diagnosis-header {
  text-align: center;
  margin-bottom: 30px;
}

.diagnosis-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.diagnosis-step {
  font-size: 16px;
  color: #ff781f;
  /* Orange accent */
  font-weight: bold;
}

.diagnosis-progress {
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  margin-bottom: 30px;
  overflow: hidden;
}

.diagnosis-progress-bar {
  height: 100%;
  background: #28a745;
  /* Green */
  width: 25%;
  /* Initial width */
  transition: width 0.4s ease;
}

.diagnosis-question-container {
  display: none;
  /* Hidden by default */
  animation: fadeIn 0.5s;
}

.diagnosis-question-container.active {
  display: block;
}

.diagnosis-question {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 25px;
}

.diagnosis-options {
  display: grid;
  width: 100%;
  gap: 10px;
}

.diagnosis-options.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.diagnosis-options.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 768px) {
  .diagnosis-options {
    gap: 15px;
  }
}

.diagnosis-option {
  background: #fff;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  /* Flex column for content centering and filling height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* Fill grid cell height */
  width: 100%;
  padding: 10px;
  /* Reduced padding for mobile */
  font-size: 14px;
  /* Slightly smaller font for mobile to fit 1 line */
}

.diagnosis-option:hover {
  border-color: #ffdcb3;
  background-color: #fff9f2;
}

.diagnosis-option.selected {
  border-color: #ff781f;
  background-color: #fff5ec;
  color: #ff781f;
  font-weight: bold;
}

.diagnosis-option-icon {
  font-size: 2em;
  display: block;
  margin-bottom: 5px;
  color: #555;
  line-height: 1;
}

.diagnosis-navigation-item {
  flex: 1;
  /* Take remaining space */
  display: flex;
  justify-content: flex-end;
  /* Align search button to right or center */
}

.diagnosis-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Align vertically center */
  margin-top: 40px;
  gap: 15px;
  /* Add spacing between buttons */
}

.btn-diagnosis {
  padding: 10px 20px;
  /* Adjusted padding */
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  transition: opacity 0.3s;
  white-space: nowrap;
  /* Prevent text wrapping */
  flex-shrink: 0;
  /* Prevent shrinking */
}

.btn-prev {
  background: #6c757d;
  color: #fff;
}

.btn-prev:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-next {
  background: #ff781f;
  color: #fff;
  margin-left: auto;
  /* Push to right */
}

.btn-search {
  background: #28a745;
  /* Green */
  color: #fff;
  width: 100%;
  /* max-width: 300px; Remove max-width constraint here if it causes issues, or keep it but allow shrinking? Keeps it 300px max */
  max-width: 100%;
  /* Let it fill the flex item */
  margin: 0;
  /* Remove auto margin */
  display: block;
  font-size: 1.1rem;
  /* Slightly reduce font size for mobile fit */
  padding: 15px 10px;
  /* Adjust padding */
}

.btn-diagnosis:hover:not(:disabled) {
  opacity: 0.9;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* エラーメッセージのスタイル */
.diagnosis-error {
  color: #dc3545; /* 赤色 */
  font-weight: bold;
  text-align: center;
  margin-top: 15px;
  display: none; /* 最初は隠しておく */
  animation: shake 0.3s; /* 揺れるアニメーション（お好みで） */
}

/* 注目させるための揺れアニメーション */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
/* Icons specifically for card brands if needed, using text for now or fontawesome if available */