/* Revamped Curriculum Section Styles */

/* Add this variable to your root CSS variables */
:root {
  /* ... your existing variables ... */
  --spacing-xxl: 3rem; /* New variable for extra spacing */
}

/* General section styling */
.curriculum-section {
  position: relative;
  background-color: white;
  overflow: hidden; /* Keep hidden unless chart labels MUST overflow section boundaries */
}

.curriculum-section::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 126, 95, 0.1) 0%, rgba(255, 126, 95, 0) 70%);
  z-index: 0;
}

.section-subtitle {
  color: var(--dentist-blue);
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-lg);
  position: relative;
  padding-bottom: var(--spacing-sm);
}

.section-subtitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-blue);
  border-radius: 2px;
}

/* Program Structure Cards */
.structure-overview {
  margin-bottom: var(--spacing-xl);
}

.program-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.program-card {
  background-color: white;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: var(--spacing-lg);
  border-left: 4px solid var(--dentist-blue);
}

.program-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.program-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(to right, rgba(109, 213, 237, 0) 0%, rgba(109, 213, 237, 0.05) 100%);
  z-index: 0;
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gradient-blue);
  color: white;
  font-size: 1.3rem;
  margin-right: var(--spacing-md);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 10px rgba(33, 147, 176, 0.2);
}

.card-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.card-content h4 {
  color: var(--dentist-blue);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-md);
}

.card-content p {
  color: var(--text-gray);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* Curriculum Breakdown */
.curriculum-breakdown {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background-color: var(--background-light);
  border-radius: var(--border-radius-lg);
}

/* Updated spacing for curriculum distribution */
.curriculum-distribution {
  display: flex;
  gap: var(--spacing-xxl); /* Increased gap between chart and tabs */
  align-items: center;
  flex-wrap: wrap;
}

.distribution-chart {
  flex: 0.8; /* Reduced from 1 to 0.8 to make it take less space */
  min-width: 260px; /* Adjusted min-width */
  display: flex;
  justify-content: center;
  align-items: center; /* Center the donut chart vertically */
}

/* Increase space for curriculum details */
.curriculum-details {
  flex: 2; /* Increased from 1.5 to 2 to give it more space */
  min-width: 280px;
}

/* --- Styles for the SVG Donut Chart --- */
.donut-chart {
  position: relative;
  width: 200px; /* Base size - adjust as needed */
  height: 200px; /* Base size - adjust as needed */
  /* No background or shadow here, apply to SVG elements if needed */
  display: flex; /* Already flex from .distribution-chart */
  align-items: center;
  justify-content: center;
  margin: 0 auto; /* Center horizontally if flex container allows */
}

.donut-svg {
  width: 100%;
  height: 100%;
  overflow: visible; /* IMPORTANT: Allows labels/lines outside viewBox */
}

/* Style for individual donut segments */
.segment-path {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center center;
  cursor: pointer;
  opacity: 0.9; /* Slightly transparent normally */
  /* Optional: Add subtle stroke between segments */
  /* stroke: white; */
  /* stroke-width: 0.5; */
}

/* Hover effect for segments */
.segment-path:hover,
.segment-path.hover-highlight {
  transform: scale(1.04);
  opacity: 1; /* Fully opaque on hover */
}

/* Highlight effect for segments linked to active tab */
.segment-path.highlight {
  opacity: 1;
  /* Example: Add a subtle outer glow or stronger stroke */
  /* filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4)); */
  /* stroke: rgba(0, 0, 0, 0.3); */
  /* stroke-width: 0.5; */
}

/* Style for label groups (line + text) */
.label-group {
    /* Groups are positioned by JS, no position needed here */
}

/* Highlight effects for label groups linked to active tab */
.label-group.highlight .label-connector {
  stroke-width: 1.5; /* Make line thicker */
  stroke: var(--dentist-blue, #2193b0); /* Match theme color */
}
.label-group.highlight .segment-label,
.label-group.highlight .segment-percentage {
  font-weight: 700; /* Make text bolder */
}
.label-group.highlight .segment-label{
  fill: var(--dentist-blue, #2193b0); /* Match theme color */
}


/* Style for connector lines */
.label-connector {
  fill: none;
  stroke: var(--text-light, #aaa); /* Use a variable or subtle grey */
  stroke-width: 1;
  transition: stroke-width 0.3s ease, stroke 0.3s ease;
}

/* Style for labels (Name) */
.segment-label {
  font-size: 5px; /* Reduced from 6.5px */
  /* font-family: var(--font-sans); /* Use your project's font */
  font-weight: 600;
  fill: var(--text-charcoal, #333); /* Consistent dark color for readability */
  pointer-events: none; /* Allow clicks/hovers to pass through to segment */
  transition: font-weight 0.3s ease, fill 0.3s ease;
}

/* Style for percentages */
.segment-percentage {
  font-size: 3.5px; /* Reduced from 4.5px */
  /* font-family: var(--font-sans); */
  font-weight: 500;
  fill: var(--text-gray, #555); /* Slightly lighter than label */
  pointer-events: none;
  transition: font-weight 0.3s ease, fill 0.3s ease;
}

/* Style for the center circle */
.donut-center-circle {
  fill: white; /* Ensure it covers the middle */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); /* Subtle shadow */
}

/* Style for the center text */
.donut-center-text {
  font-size: 7px; /* Adjust size relative to viewBox */
  /* font-family: var(--font-sans); */
  font-weight: 700; /* Bold */
  fill: var(--dentist-blue, #2193b0); /* Match theme */
  pointer-events: none;
  text-anchor: middle; /* Ensure centered */
  dominant-baseline: middle; /* Ensure centered */
}
.donut-center-text.line2 {
  font-size: px; /* Make second line slightly smaller if desired */
}
/* --- End of SVG Donut Chart Styles --- */


/* Curriculum tabs */
.curriculum-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  overflow-x: auto;
  padding-bottom: var(--spacing-xs);
  flex-wrap: nowrap; /* Prevent wrapping unless absolutely necessary */
}

.tab-btn {
  background: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-weight: 600;
  color: var(--text-gray);
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.tab-btn:hover {
  color: var(--dentist-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md); /* Add shadow on hover */
}

.tab-btn.active {
  background: var(--gradient-blue);
  color: white;
  transform: translateY(0);
  box-shadow: var(--shadow-inner); /* Optional inset shadow for active */
}

/* Tab content */
.curriculum-tab-content {
  position: relative;
  min-height: 200px; /* Ensure space for content */
}

.tab-panel {
  display: none; /* Changed from absolute positioning */
  /* position: absolute; */ /* Caused issues with varying content height */
  width: 100%;
  /* height: auto; */ /* Let height be natural */
  /* top: 0; */
  /* left: 0; */
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  background-color: white;
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.tab-panel.active {
  display: block; /* Show the active panel */
  opacity: 1;
  /* position: relative; */ /* No longer needed */
  animation: fadeIn 0.5s ease; /* Keep fade-in animation */
}

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

.curriculum-list {
  list-style: none;
  padding: 0;
  margin: 0; /* Remove default margin */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-sm);
}

.curriculum-list li {
  display: flex;
  align-items: flex-start;
  color: var(--text-gray);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) 0;
}

.list-icon {
  color: var(--dentist-blue);
  margin-right: var(--spacing-sm);
  flex-shrink: 0;
  width: 1.2em; /* Give icon consistent space */
  text-align: center;
}

/* Clinical Experience */
.clinical-experience {
  margin-bottom: var(--spacing-xl);
}

.case-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.case-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.counter-circle {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: var(--spacing-md);
}

.counter-circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.counter-circle circle {
  fill: transparent;
  stroke-width: 10;
  stroke-linecap: round;
  /* stroke-dasharray: 440; /* Circumference for r=70 (2*PI*70) */
  stroke-dasharray: calc(2 * 3.14159 * 70); /* Calculate circumference */
  transform-origin: center;
}

.track {
  stroke: var(--background-light);
}

.progress {
  stroke: var(--dentist-blue);
  /* stroke-dashoffset: calc(440 - (440 * var(--progress)) / 200); /* Adjust max value (200?) */
  stroke-dashoffset: calc( (2 * 3.14159 * 70) * (1 - var(--progress, 0) / var(--max-progress, 100)) ); /* Use CSS vars for progress */
  transition: stroke-dashoffset 1s ease;
  filter: drop-shadow(0 0 2px rgba(33, 147, 176, 0.5));
}

.counter-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.counter-number {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--dentist-blue);
  line-height: 1;
}

.counter-label {
  font-size: var(--font-size-xs);
  color: var(--text-gray);
  margin-top: var(--spacing-xs);
}

.counter-description {
  font-size: var(--font-size-sm);
  color: var(--text-gray);
  max-width: 200px;
}

.techniques-exposure {
  background-color: var(--background-light);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.techniques-exposure h4 {
  color: var(--dentist-blue);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-md);
}

.techniques-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}

.technique-item {
  margin-bottom: var(--spacing-sm);
}

.technique-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.technique-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-charcoal);
}

.technique-rating {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--dentist-blue);
}

.technique-bar {
  height: 8px;
  background-color: rgba(33, 147, 176, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.technique-fill {
  height: 100%;
  background: var(--gradient-blue);
  border-radius: 4px;
  transition: width 1s ease;
}

/* Board Certification */
.board-certification {
  margin-bottom: var(--spacing-lg);
}

.certification-process {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
}

.process-steps {
  flex: 1.5;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.process-step {
  display: flex;
  align-items: flex-start;
  background-color: white;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  position: relative;
}

.process-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.process-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 3px;
  background: var(--gradient-blue);
  border-radius: 3px 0 0 3px;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-blue);
  color: white;
  font-size: var(--font-size-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  flex-shrink: 0;
  box-shadow: 0 4px 8px rgba(33, 147, 176, 0.2);
}

.step-content {
  flex: 1;
}

.step-content h4 {
  color: var(--dentist-blue);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-md);
}

.step-content p {
  color: var(--text-gray);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.certification-stats {
  flex: 1;
  min-width: 280px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

.stat-card {
  background-color: white;
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gradient-blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-md);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--dentist-blue);
  line-height: 1.2;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-gray);
  margin-bottom: var(--spacing-xs);
}

.stat-desc {
  font-size: var(--font-size-xs);
  color: var(--text-light);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .curriculum-distribution {
    flex-direction: column; /* Stack chart and details */
    gap: var(--spacing-xl); /* Slightly reduced gap when stacked */
  }

  .distribution-chart {
    margin-bottom: var(--spacing-lg);
    width: 100%; /* Allow chart container to take full width */
    max-width: 300px; /* Optional: Limit max width */
  }

  .curriculum-details {
      width: 100%; /* Ensure details take full width when stacked */
  }

  .curriculum-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .program-cards {
    grid-template-columns: 1fr;
  }

  .case-counters {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .counter-circle {
    width: 140px;
    height: 140px;
  }

  .techniques-grid {
    grid-template-columns: 1fr;
  }

  .certification-stats {
    grid-template-columns: 1fr;
  }

  /* Reduced donut chart container size for tablets */
  .donut-chart {
    width: 180px;
    height: 180px;
  }
  /* Optional: Adjust label font sizes for smaller SVG view */
  /* .segment-label { font-size: 5.5px; } */
  /* .segment-percentage { font-size: 4.5px; } */
}

@media (max-width: 576px) {
  .curriculum-tabs {
    flex-wrap: wrap; /* Allow tabs to wrap on small screens */
  }

  .tab-btn {
    flex-grow: 1; /* Allow buttons to grow and fill space */
    min-width: calc(33% - var(--spacing-sm)); /* Approx 3 buttons per row */
    text-align: center; /* Center text if buttons wrap */
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .curriculum-list {
    grid-template-columns: 1fr;
  }

  .case-counters {
    grid-template-columns: 1fr;
  }

  .counter-circle {
    width: 160px; /* Maybe keep slightly larger for counters */
    height: 160px;
  }

  /* Further reduced donut chart container size for mobile */
  .donut-chart {
    width: 160px;
    height: 160px;
  }
   /* Optional: Adjust label font sizes for smaller SVG view */
  /* .segment-label { font-size: 5px; } */
  /* .segment-percentage { font-size: 4px; } */
}

/* Utility Classes (If needed, e.g., for screen readers) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}