/* Material Design 3 inspired radio controls */
:root {
  --md3-radio-outline: var(--md3-outline, #cac4d0);
  --md3-radio-selected: var(--md3-primary, var(--accent-color, #6750a4));
  --md3-radio-focus: var(--md3-focus, #eaddff);
  --md3-radio-hover-layer: color-mix(in srgb, var(--md3-radio-selected) 14%, transparent);
  --md3-radio-disabled: rgba(0, 0, 0, 0.38);
  --md3-radio-label: var(--md3-on-surface, #1c1b1f);
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
  :root {
    --md3-radio-hover-layer: rgba(103, 80, 164, 0.12);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --md3-radio-outline: var(--md3-outline, #49454f);
    --md3-radio-hover-layer: color-mix(in srgb, var(--md3-radio-selected) 20%, transparent);
    --md3-radio-disabled: rgba(255, 255, 255, 0.38);
    --md3-radio-label: var(--md3-on-surface, #e6e0e9);
  }
}

.md3-radio-group-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--md3-radio-label);
}

.md3-radio-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.md3-radio-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--md3-radio-label);
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.md3-radio-option:hover {
  background: var(--md3-radio-hover-layer);
}

.md3-radio-option:focus-within {
  box-shadow: 0 0 0 2px var(--md3-radio-focus);
}

.md3-radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.md3-radio-custom {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--md3-radio-outline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.md3-radio-custom::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transform: scale(0);
  transition: transform 0.2s ease, background 0.2s ease;
}

.md3-radio-option input[type="radio"]:checked + .md3-radio-custom {
  border-color: var(--md3-radio-selected);
}

.md3-radio-option input[type="radio"]:checked + .md3-radio-custom::after {
  background: var(--md3-radio-selected);
  transform: scale(1);
}

.md3-radio-option input[type="radio"]:focus-visible + .md3-radio-custom {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--md3-radio-selected) 32%, transparent);
}

@supports not (color: color-mix(in srgb, white 50%, black)) {
  .md3-radio-option input[type="radio"]:focus-visible + .md3-radio-custom {
    box-shadow: 0 0 0 4px rgba(103, 80, 164, 0.35);
  }
}

.md3-radio-option input[type="radio"]:checked ~ .md3-radio-label {
  color: var(--md3-radio-selected);
}

.md3-radio-label {
  line-height: 1.4;
}

.md3-radio-option input[type="radio"]:disabled + .md3-radio-custom {
  border-color: var(--md3-radio-disabled);
}

.md3-radio-option input[type="radio"]:disabled + .md3-radio-custom::after {
  background: var(--md3-radio-disabled);
}

.md3-radio-option input[type="radio"]:disabled ~ .md3-radio-label {
  color: var(--md3-radio-disabled);
}

.md3-radio-option input[type="radio"]:disabled ~ .md3-radio-label,
.md3-radio-option input[type="radio"]:disabled + .md3-radio-custom {
  cursor: not-allowed;
}

.md3-radio-option[aria-disabled="true"],
.md3-radio-option input[type="radio"]:disabled {
  cursor: not-allowed;
}

@supports selector(.md3-radio-option:has(input)) {
  .md3-radio-option:has(input[type="radio"]:disabled) {
    cursor: not-allowed;
  }
}