/* BaseRadioGroup Component Styles */

.mint-radio-group {
  display: flex;
  gap: 1rem;
}

.mint-radio-group--vertical {
  flex-direction: column;
}

.mint-radio-group--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.mint-radio-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.mint-radio-option--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-radio-option__input-wrapper {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hit area grows past the 16px circle without moving the layout (1b). */
.mint-radio-option__input-wrapper::before {
  content: '';
  position: absolute;
  inset: -0.5rem;
}

.mint-radio-option__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mint-radio-option__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--_control-border-strong);
  background-color: var(--bg-card);
  flex-shrink: 0;
  position: relative;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mint-radio-option__circle--sm {
  width: 0.875rem;
  height: 0.875rem;
}

.mint-radio-option__circle--md {
  width: 1rem;
  height: 1rem;
}

.mint-radio-option__circle--lg {
  width: 1.25rem;
  height: 1.25rem;
}

.mint-radio-option__circle--checked {
  border-color: var(--color-primary);
}

.mint-radio-option__native:focus-visible + .mint-radio-option__circle {
  box-shadow: var(--focus-ring-offset);
}

.mint-radio-option__native:disabled + .mint-radio-option__circle {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  cursor: not-allowed;
}

.mint-radio-option__native:disabled + .mint-radio-option__circle.mint-radio-option__circle--checked {
  border-color: var(--text-muted);
}

.mint-radio-option__native:disabled + .mint-radio-option__circle.mint-radio-option__circle--checked .mint-radio-option__dot {
  background-color: var(--text-muted);
}

.mint-radio-option__dot {
  border-radius: 9999px;
  background-color: var(--color-primary);
}

.mint-radio-option__dot--sm {
  width: 0.4375rem;
  height: 0.4375rem;
}

.mint-radio-option__dot--md {
  width: 0.5rem;
  height: 0.5rem;
}

.mint-radio-option__dot--lg {
  width: 0.625rem;
  height: 0.625rem;
}

.mint-radio-option__content {
  display: flex;
  flex-direction: column;
}

.mint-radio-option__label {
  color: var(--text-primary);
}

.mint-radio-option__label--sm {
  font-size: 0.875rem;
}

.mint-radio-option__label--md {
  font-size: 0.875rem;
}

.mint-radio-option__label--lg {
  font-size: 1rem;
}

.mint-radio-option__description {
  color: var(--text-muted);
}

.mint-radio-option__description--sm {
  font-size: 0.75rem;
}

.mint-radio-option__description--md {
  font-size: 0.75rem;
}

.mint-radio-option__description--lg {
  font-size: 0.875rem;
}

/* ========================================================================
   Variant: Card Tile
   ========================================================================
   Each option is a full card with title + description; rad + title share
   one flex row with align-items: center (circles locked to title's vertical
   center, not at the top). Description sits below, indented to match the
   title's left edge (rad width + gap).
   ======================================================================== */

.mint-radio-group--tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mint-radio-group--tile .mint-radio-option {
  display: block;
  padding: 0.875rem 1rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mint-radio-group--tile .mint-radio-option:hover:not(.mint-radio-option--disabled) {
  border-color: var(--text-muted);
}

.mint-radio-group--tile .mint-radio-option--selected {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

.mint-radio-group--tile .mint-radio-option__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mint-radio-group--tile .mint-radio-option__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.mint-radio-group--tile .mint-radio-option__description {
  display: block;
  /* md circle (1rem) + flex gap (0.75rem) = 28px — aligns with title's left edge. */
  padding-left: calc(1rem + 0.75rem);
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 0.25rem;
}

.mint-radio-group--tile .mint-radio-option--disabled {
  opacity: var(--mint-disabled-opacity);
  cursor: not-allowed;
}

.mint-radio-group--tile .mint-radio-option__native {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}