div.ahg-virtual-ratings article.ahg-session {
	margin-left:2rem;
}


/* Clean up default fieldset borders and layout the spacing */
.ahg-session-rating {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* Spacing between your vertical pill buttons */
}

/* Optional styling for your legend */
fieldset.ahg-session-rating legend {
  font-family: sans-serif;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1e293b;
}

/* Treat the span container as a block element */
.ahg-rating-option {
  display: block;
}

/* Style the label to look like the entire pill button */
.ahg-rating-option label {
  display: block;
  width: 100px;
  box-sizing: border-box; /* Ensures padding doesn't push the width past 100px */
  padding: 10px 0;
  background-color: #f8fafc; /* Slate-50 */
  border: 2px solid #e2e8f0; /* Slate-200 */
  border-radius: 50px; /* Perfect pill shape */
  cursor: pointer;
  font-family: sans-serif;
  color: #334155;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease-in-out;
  
  /* Prevents double-click text selection highlighting */
  user-select: none; 
}

/* Completely hide the native radio button visually while preserving accessibility */
.ahg-rating-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Hover state targeting the label */
.ahg-rating-option label:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

/* The Magic Trick: Style the label ONLY when the input before it is checked */
.ahg-rating-option input[type="radio"]:checked + label {
  background-color: #eff6ff; /* Blue-50 */
  border-color: #3b82f6; /* Blue-500 */
  color: #1d4ed8; /* Blue-700 */
}

/* Keyboard focus layout for accessibility */
.ahg-rating-option input[type="radio"]:focus-visible + label {
  outline: 2px solid #3b82f6;
  outline-offset: 4px;
}