/* ===================================
   RADIO ATOM - Custom Radio Button Component
   ===================================
   
   CSS-native radio buttons with custom styling.
   Professional, clean, accessible.
*/

/* Radio wrapper */
.radio-wrapper {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* Hide native radio (but keep accessible) */
.radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom radio visual - Chunky for easy clicking, Layer 4 */
.radio-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--radio-size);
  height: var(--radio-size);
  border: var(--border-width-2) solid var(--border-default);
  border-radius: var(--border-radius-full);
  background-color: var(--bg-surface);      /* #ffffff - Top layer */
  transition: all var(--duration-150) var(--easing-out);
  margin-top: 0.125em; /* Align with text baseline */
}

/* Radio dot (hidden by default) */
.radio-custom::after {
  content: '';
  display: none;
  width: var(--space-2_5);
  height: var(--space-2_5);
  border-radius: var(--border-radius-full);
  background-color: var(--text-inverse);
}

/* ===================================
   RADIO STATES - Pure CSS
   =================================== */

/* Checked state */
.radio-input:checked + .radio-custom {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.radio-input:checked + .radio-custom::after {
  display: block;
}

/* Hover state */
.radio-wrapper:hover .radio-custom {
  border-color: var(--border-strong);
}

.radio-input:checked + .radio-custom:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Focus state - pure CSS */
.radio-input:focus-visible + .radio-custom {
  outline: var(--border-width-2) solid var(--border-focus);
  outline-offset: var(--border-width-2);
}

/* Disabled state */
.radio-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.radio-input:disabled + .radio-custom {
  background-color: var(--bg-panel);        /* Use panel color for disabled */
  border-color: var(--border-subtle);
  cursor: not-allowed;
}

/* ===================================
   RADIO LABEL
   =================================== */

.radio-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-0_5);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--line-height-normal);
}

.radio-label-text {
  font-weight: var(--font-weight-medium);
}

.radio-description {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

.radio-disabled .radio-label {
  cursor: not-allowed;
  color: var(--text-muted);
}

/* ===================================
   RADIO SIZES
   =================================== */

.radio-sm .radio-custom {
  width: calc(var(--radio-size) * 0.9);
  height: calc(var(--radio-size) * 0.9);
}

.radio-sm .radio-custom::after {
  width: var(--space-2);
  height: var(--space-2);
}

.radio-sm .radio-label {
  font-size: var(--text-xs);
}

.radio-md .radio-custom {
  width: var(--radio-size);
  height: var(--radio-size);
}

.radio-md .radio-custom::after {
  width: var(--space-2_5);
  height: var(--space-2_5);
}

.radio-lg .radio-custom {
  width: calc(var(--radio-size) * 1.2);
  height: calc(var(--radio-size) * 1.2);
}

.radio-lg .radio-custom::after {
  width: var(--space-3);
  height: var(--space-3);
}

.radio-lg .radio-label {
  font-size: var(--text-base);
}

/* ===================================
   RADIO GROUPS
   =================================== */

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.radio-group-horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 640px) {
  .radio-wrapper {
    gap: var(--space-1_5);
  }
  
  .radio-custom {
    width: var(--radio-size);
    height: var(--radio-size);
  }
  
  .radio-custom::after {
    width: var(--space-2_5);
    height: var(--space-2_5);
  }
  
  .radio-label {
    font-size: var(--text-sm);
  }
  
  /* Stack horizontal groups on mobile */
  .radio-group-horizontal {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ===================================
   ACCESSIBILITY
   =================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .radio-custom {
    transition: none;
  }
}