/* RadioGroup Component Styles */
/* Styled to match the design system radio group component */
/* Works with dmc.RadioGroup */

.custom-radio-group {
  /* Container for the radio group */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-radio-group[data-orientation="horizontal"] {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

/* Make radio group role elements horizontal */
.custom-radio-group[role="radiogroup"],
.custom-radio-group [role="radiogroup"] {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  height: 36px;
}

/* Style the radio input element from dmc.Radio */
/* Override Mantine's internal classes (m_*) and static classes */
.custom-radio-group .mantine-Radio-input,
.custom-radio-group[role="radiogroup"] .mantine-Radio-input,
.custom-radio-group [role="radiogroup"] .mantine-Radio-input,
.custom-radio-group input[type="radio"],
.custom-radio-group[role="radiogroup"] input[type="radio"],
.custom-radio-group [role="radiogroup"] input[type="radio"] {
  /* Base radio styling - matches h-5 w-5 (20px x 20px) */
  height: 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  border: 1px solid hsl(var(--accent-brand)) !important;
  background-color: hsl(var(--background)) !important;
  transition: background-color 150ms ease, border-color 150ms ease !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important;
  position: relative !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  align-items: unset !important;
  justify-content: unset !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}

/* Unchecked state - transparent background, accent-brand border */
.custom-radio-group .mantine-Radio-input:not(:checked),
.custom-radio-group[role="radiogroup"] .mantine-Radio-input:not(:checked),
.custom-radio-group [role="radiogroup"] .mantine-Radio-input:not(:checked),
.custom-radio-group input[type="radio"]:not(:checked),
.custom-radio-group[role="radiogroup"] input[type="radio"]:not(:checked),
.custom-radio-group [role="radiogroup"] input[type="radio"]:not(:checked) {
  background-color: transparent !important;
  border-color: hsl(var(--accent-brand)) !important;
}

/* Checked state - accent-brand background, no center dot */
.custom-radio-group .mantine-Radio-input:checked,
.custom-radio-group[role="radiogroup"] .mantine-Radio-input:checked,
.custom-radio-group [role="radiogroup"] .mantine-Radio-input:checked,
.custom-radio-group input[type="radio"]:checked,
.custom-radio-group[role="radiogroup"] input[type="radio"]:checked,
.custom-radio-group [role="radiogroup"] input[type="radio"]:checked {
  background-color: transparent !important;
  border-color: hsl(var(--accent-brand)) !important;
}

/* Disabled state */
.custom-radio-group .mantine-Radio-input:disabled,
.custom-radio-group .mantine-Radio-input[disabled],
.custom-radio-group[role="radiogroup"] .mantine-Radio-input:disabled,
.custom-radio-group[role="radiogroup"] .mantine-Radio-input[disabled],
.custom-radio-group [role="radiogroup"] .mantine-Radio-input:disabled,
.custom-radio-group [role="radiogroup"] .mantine-Radio-input[disabled] {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.custom-radio-group .mantine-Radio-input:disabled:not(:checked),
.custom-radio-group .mantine-Radio-input[disabled]:not(:checked),
.custom-radio-group[role="radiogroup"] .mantine-Radio-input:disabled:not(:checked),
.custom-radio-group[role="radiogroup"] .mantine-Radio-input[disabled]:not(:checked),
.custom-radio-group [role="radiogroup"] .mantine-Radio-input:disabled:not(:checked),
.custom-radio-group [role="radiogroup"] .mantine-Radio-input[disabled]:not(:checked) {
  background-color: transparent !important;
  border-color: hsl(var(--muted) / 0.5) !important;
}

.custom-radio-group .mantine-Radio-input:disabled:checked,
.custom-radio-group .mantine-Radio-input[disabled]:checked,
.custom-radio-group[role="radiogroup"] .mantine-Radio-input:disabled:checked,
.custom-radio-group[role="radiogroup"] .mantine-Radio-input[disabled]:checked,
.custom-radio-group [role="radiogroup"] .mantine-Radio-input:disabled:checked,
.custom-radio-group [role="radiogroup"] .mantine-Radio-input[disabled]:checked {
  background-color: hsl(var(--muted) / 0.5) !important;
  border-color: hsl(var(--muted) / 0.5) !important;
}

/* Radio label styling */
.custom-radio-group .mantine-Radio-label,
.custom-radio-group[role="radiogroup"] .mantine-Radio-label,
.custom-radio-group [role="radiogroup"] .mantine-Radio-label {
  cursor: pointer !important;
  font-family: var(--font-family, 'Sora', sans-serif) !important;
  font-size: 14px !important;
  color: hsl(var(--foreground)) !important;
  user-select: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.custom-radio-group .mantine-Radio-input:disabled ~ .mantine-Radio-label,
.custom-radio-group .mantine-Radio-input[disabled] ~ .mantine-Radio-label,
.custom-radio-group[role="radiogroup"] .mantine-Radio-input:disabled ~ .mantine-Radio-label,
.custom-radio-group[role="radiogroup"] .mantine-Radio-input[disabled] ~ .mantine-Radio-label,
.custom-radio-group [role="radiogroup"] .mantine-Radio-input:disabled ~ .mantine-Radio-label,
.custom-radio-group [role="radiogroup"] .mantine-Radio-input[disabled] ~ .mantine-Radio-label {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Ensure proper spacing between radio and label */
.custom-radio-group .mantine-Radio-body,
.custom-radio-group[role="radiogroup"] .mantine-Radio-body,
.custom-radio-group [role="radiogroup"] .mantine-Radio-body {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

/* Ensure the inner wrapper doesn't block pointer events */
.custom-radio-group .mantine-Radio-inner,
.custom-radio-group[role="radiogroup"] .mantine-Radio-inner,
.custom-radio-group [role="radiogroup"] .mantine-Radio-inner {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Remove margin-left from label since we're using gap */
.custom-radio-group .mantine-Radio-label,
.custom-radio-group[role="radiogroup"] .mantine-Radio-label,
.custom-radio-group [role="radiogroup"] .mantine-Radio-label {
  margin-left: 0 !important;
}

/* RadioGroup label styling */
.custom-radio-group .mantine-RadioGroup-label {
  font-family: var(--font-family, 'Sora', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  margin-bottom: 8px !important;
}

/* Hide any inner icons/dots from Mantine (the white center dot/SVG) */
.custom-radio-group .mantine-Radio-icon,
.custom-radio-group[role="radiogroup"] .mantine-Radio-icon,
.custom-radio-group [role="radiogroup"] .mantine-Radio-icon,
.custom-radio-group .mantine-Radio-icon svg,
.custom-radio-group[role="radiogroup"] .mantine-Radio-icon svg,
.custom-radio-group [role="radiogroup"] .mantine-Radio-icon svg,
.custom-radio-group svg[class*="m_"],
.custom-radio-group[role="radiogroup"] svg[class*="m_"],
.custom-radio-group [role="radiogroup"] svg[class*="m_"] {
  fill: hsl(var(--accent-brand)) !important;
  stroke: hsl(var(--accent-brand)) !important;
  color: hsl(var(--accent-brand)) !important;
  width: 14px !important;
  height: 14px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
}


.custom-radio-group .mantine-Radio-icon:checked,
.custom-radio-group[role="radiogroup"] .mantine-Radio-icon:checked,
.custom-radio-group [role="radiogroup"] .mantine-Radio-icon:checked,
.custom-radio-group .mantine-Radio-icon:checked svg,
.custom-radio-group[role="radiogroup"] .mantine-Radio-icon:checked svg,
.custom-radio-group [role="radiogroup"] .mantine-Radio-icon:checked svg,
.custom-radio-group .mantine-Radio-icon:checked svg[class*="m_"],
.custom-radio-group[role="radiogroup"] .mantine-Radio-icon:checked svg[class*="m_"],
.custom-radio-group [role="radiogroup"] .mantine-Radio-icon:checked svg[class*="m_"] {
  fill: hsl(var(--accent-brand)) !important;
  stroke: hsl(var(--accent-brand)) !important;
  color: hsl(var(--accent-brand)) !important;
}