/* ===========================================================
   Custom styles for individual service detail pages
   (root-canal-treatment.html, dental-implants.html,
   braces-treatment.html)
=========================================================== */

/* --- Process step boxes (numbered circles) --- */
.cs_process .cs_iconbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 10px 15px;
}
.cs_process .cs_iconbox_icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cs_process .cs_iconbox_title {
  margin-bottom: 6px;
}
.cs_process .cs_iconbox_subtitle {
  color: var(--primary);
  opacity: 0.75;
}

/* --- FAQ accordion (native <details>/<summary>, no JS needed) --- */
.cs_faq_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs_faq_item {
  border: 1px solid rgba(12, 184, 182, 0.25);
  border-radius: 8px;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
.cs_faq_question {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-weight: 600;
  font-size: 18px;
  color: var(--primary);
  position: relative;
  padding-right: 50px;
}
.cs_faq_question::-webkit-details-marker {
  display: none;
}
.cs_faq_question::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--accent);
  transition: transform 0.3s ease;
}
.cs_faq_item[open] .cs_faq_question::after {
  content: "\2212";
}
.cs_faq_answer {
  padding: 0 24px 20px;
  color: var(--primary);
  opacity: 0.8;
  line-height: 1.7;
}