/* Radio Group — SD-59
 * Native <input type="radio"> styled with appearance:none.
 * Mobile-first: S default, M ≥1024px, L ≥1280px
 */

.radio-group {
  border: none;
  padding: 0;
  margin: 0;
}

.radio-group__legend {
  margin-bottom: var(--dk-space-02);
  color: var(--dk-color-black);
}

.radio-group__options {
  display: flex;
  flex-direction: column;
}

/* --- Option row (label wrapper) --- */
.radio-group__option {
  display: flex;
  align-items: center;
  gap: var(--dk-space-01);           /* 8px between radio + text */
  height: 2.75rem;                   /* 44px */
  padding-top: var(--dk-space-00);   /* 4px */
  padding-bottom: var(--dk-space-00);
  padding-right: var(--dk-space-00);
  cursor: pointer;
}

/* Focus ring on the label when its input is focused */
.radio-group__option:has(.radio-group__input:focus-visible) {
  outline: none;
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 8px #008eff;
}

/* --- Custom radio control --- */
.radio-group__input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;   /* 20px */
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 1000px;
  border: 1px solid var(--dk-color-black);
  background-color: var(--dk-color-white);
  cursor: pointer;
  position: relative;
  margin: 0;
}

/* Inner dot (hidden by default, shown when checked) */
.radio-group__input::before {
  content: '';
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  width: 0.75rem;   /* 12px */
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--dk-color-black);
  opacity: 0;
}

.radio-group__input:checked {
  background-color: var(--dk-color-brand-secondary-01);
}

.radio-group__input:checked::before {
  opacity: 1;
}

/* Hover: thicker border */
.radio-group__option:hover .radio-group__input {
  border-width: 2px;
}

/* Hide default focus outline (focus ring handled above) */
.radio-group__input:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .radio-group__option,
  .radio-group__input {
    transition: none;
  }
}