/* Gender Selection Component Styles */
.gender-selection {
  margin: 3rem 13.54% 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;

  @media screen and (max-width: 992px) {
    margin: 56px 1rem 2rem;
  }
}

.gender-selection__label {
  font-size: 1rem;
  color: #002b47;
  font-family: var(--font-medium);
  text-align: center;
  margin-bottom: 1rem;
}

.gender-selection__options {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  transition: all 0.3s ease;
}

.gender-selection__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.gender-selection__radio {
  display: none;
}

.gender-selection__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gender-selection__icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  box-shadow: 0 8px 40px 0 rgba(112, 144, 176, 0.25);
}

.gender-selection__icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.gender-selection__text {
  font-family: var(--font-semi-bold);
  font-size: 1rem;
  color: #666;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Selected state styles */
.gender-selection__radio:checked + .gender-selection__label .gender-selection__icon {
  border-color: #1272e2;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.gender-selection__radio:checked + .gender-selection__label .gender-selection__text {
  color: #1272e2;
  font-weight: 600;
}

/* Error state */
.gender-selection__option.error .gender-selection__icon {
  border: 3px solid #dc3545 !important;
  box-shadow: 0 0 10px rgba(220, 53, 69, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .gender-selection__options {
    gap: 1rem;
  }

  .gender-selection__option.error .gender-selection__icon {
    border: 3px solid #dc3545 !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
  }

  .gender-selection__icon {
    width: 80px;
    height: 80px;
  }

  .gender-selection__icon img {
    width: 60px;
    height: 60px;
  }

  .gender-selection__text {
    font-size: 0.9rem;
  }
}